I am trying to build a custom LWC lightning carousel. I am able to set the background image on page load but I cannot get it to auto-slide. I am setting the background image to divs in the `renderedCallback` and I am also calling my auto-slide code in the `renderedCallback` but it is giving the error that it cannot read property querySelectorAll of undefined. How can I get it to auto-slide?

Here is my JavaScript code:

```
  @track result;
  @track target = [];
  @track slideIndex = 0;
  @track hasRendered = false;
  @track slides;
  @track dots;

  @wire(getBanners, {})
  wiredResult({ error, data }) {
    if (data) {
      this.result = data;
    }
  }

  renderedCallback() {
    this.addStyle();
    this.hasRendered = true;
    if (this.hasRendered == true) {
      console.log('inside has rendered');
      setTimeout(this.showSlides, 2000);
    }
  }

  addStyle() {
    const divs = this.template.querySelectorAll('.slds-box');
    console.log('divs length' + divs.length);
    Array.from(divs).forEach((div) => {
      const index = Number(div.getAttribute('data-index'));

      div.style.backgroundImage = 'url()';
    });
  }

  showSlides() {
    var i;
    this.slides = this.template.querySelectorAll('.mySlides');
    console.log('slides' + slides.length);
    this.dots = this.template.querySelectorAll('.dot');

    console.log('dots' + this.dots.length);
    for (i = 0; i < this.slides.length; i++) {
      this.slides[i].style.display = 'none';
    }
    this.slideIndex++;
    if (this.slideIndex > this.slides.length) {
      this.slideIndex = 1;
    }
    for (i = 0; i < dots.length; i++) {
      this.dots[i].className = this.dots[i].className.replace(' active', '');
    }
    this.slides[this.slideIndex - 1].style.display = 'block';
    this.dots[this.slideIndex - 1].className += ' active';
    // // Change image every 2 seconds
  }

```

Here is my HTML code:

```
<template>
  <div class="slideshow-container">
    <template for:each={result} for:item="res" for:index="index">
      <div class="mySlides fade" key={res.Id}>
        <div
          data-index={index}
          class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small"
        >
          <div>{res.Id} {res.Comments__c}</div>
        </div>
      </div>
      <div style="text-align: center" key={res.Id}>
        <span class="dot"></span>
      </div>
    </template>
  </div>
</template>

```