I am trying to change images in carousal when i click to small images but getting error

Question

I have Carousal Slider and i am trying to change the images when click to small images but unfortunately getting error please help me how can i resolve that thank u.

please check error Uncaught TypeError: Cannot read properties of undefined (reading 'className')

jquery script

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 view

 <!--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

You should use FOR LOOP to make relation between small pics and slides. At the same time for loop is necessary to add active class to each related slide. Look at this example:

<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