Мои изображения отображаются в виде списка, а не слайд-шоу в моем lwc

Question

Я создаю слайд-шоу изображений в моем компоненте, но изображения отображаются в виде списка, а не слайдов. Я хочу загрузить несколько тысяч изображений в этом слайд-шоу, как карусель. Любые предложения будут оценены. Но не молниеносная карусель, поскольку она имеет ограничение в 5 изображений. Здесь я загружаю изображения из родительского компонента.

import { LightningElement, api  } from 'lwc';

export default class Carousel extends LightningElement {
    @api selectdImage;
    @api value;

    renderedCallback() {
        // initialize component 

        var slideIndex = 0;
        showSlides();
        function showSlides() {
         var i;
          var slides = this.template.getElementsByClassName("mySlides");
           var dots = this.template.getElementsByClassName("dot");

          for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";  
          }
          console.log("entered hereee");
         slideIndex++;
          if (slideIndex > slides.length) {slideIndex = 1}

          for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
          }
          slides[slideIndex-1].style.display = "block";  
         dots[slideIndex-1].className += " active";
          setTimeout(showSlides, 2000); 
        }

    } 
}



<template>
      <div class="slds-m-around_medium">

             <div class="container">                    

                   <div class="slideshow-container">

                        <template for:each={value}  for:item="rows">
                              <span key={imageName} >{rows.imageName} </span> 
                               <div class="mySlides fade" key={imageName}>

                                     <img key={imageURL} src={rows.imageURL} style="width:100%">
                               </div>
                                     <div style="text-align:center" key={imageName}>
                                                            <span class="dot"></span> 
                                                      </div>

                                          </template>
                                          </div>

</div>
                </div>

</template>