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

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