當我點擊小圖像但出現錯誤時，我正在嘗試更改輪播中的圖像

Question

我有 Carousal Slider，我試圖在點擊小圖片時更改圖片，但不幸的是出現錯誤，請幫助我如何解決這個問題，謝謝。

請檢查錯誤 Uncaught TypeError: Cannot read properties of undefined (reading 'className')

jquery 腳本

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}


**script**

    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("demo");
      var captionText = document.getElementById("caption");
      if (n > slides.length) {slideIndex = 1}
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      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";
      captionText.innerHTML = dots[slideIndex-1].alt;
    }

Html 查看

 <!--Start Carousel wrapper -->
  <div class="col-md-4 me-5">
        <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-mdb- 
          ride="carousel">
          <!-- Slides -->
          <div class="carousel-inner mb-5">
            @foreach ($marchandiseShop->marchandiseDetails as $key => $value)
                <div class="carousel-item {{$key == 0 ? 'active' : '' }}">
                <img src="{{ Config('wfh.file').$value->images}}" class="d-block w-100" alt="..." data-mdb-toggle="modal" data-mdb-target="#lightbox"/>
                </div>
            @endforeach

          </div>
          <!-- Slides -->

          <!-- Thumbnails -->

          <div class="carousel-indicators" style="margin-bottom: -20px;">
            @foreach ($marchandiseShop->marchandiseDetails as $key => $value)
                <button type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="0" class="{{$key == 0 ? 'active' : '' }}"
                    aria-current="true" aria-label="Slide 1" style="width: 100px;">
                    <img class="d-block w-100"
                    src="{{ Config('wfh.file').$value->images}}" class="img-fluid" />
                </button>
            @endforeach

          </div>
          <!-- Thumbnails -->
        </div>
        <!-- Carousel wrapper -->

Answer 1

你應該使用 FOR 循環來建立小圖片和幻燈片之間的關系。 同時 for 循環是必要的，以將活動 class 添加到每個相關幻燈片。 看這個例子：

<div class="col-md-4 me-5">
    <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-mdb-ride="carousel">         
      <div class="carousel-inner mb-5">        
      </div>
      <div class="carousel-indicators" style="margin-bottom: -20px;">
      </div>
    </div>          
    </div>    

@foreach ($marchandiseShop->marchandiseDetails as $value)
<script>        
$(document).ready(function(){
         for(let k = 0; k < 1; k++) {
         $('<div class="carousel-item"><img src="{{ Config('wfh.file').$value->images}}" class="d-block w-100"> </div> ').appendTo('.carousel-inner');
         $('<button type="button" data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="'+k+'" aria-current="true" aria-label="Slide '+k+'" style="width: 100px;"> <img class="d-block w-100" src="{{ Config('wfh.file').$value->images}}" class="img-fluid" /> </button>').appendTo('.carousel-indicators');
         }
         $('.carousel-item').first().addClass('active');
         $('.carousel-indicators > button').first().addClass('active');
         $('#carouselExampleIndicators').carousel();
         });
         </script>       
@endforeach