我目前正在开发一个带有幻灯片效果的滑块组件。我的目标是让多张幻灯片无缝过渡。然而，我遇到了一个问题，只有序列中的第一张幻灯片显示正常。随后的幻灯片，应该在第一张之后，根本没有出现。这是令人困惑的，因为该功能似乎对第一张幻灯片非常有效，但是对于其余的幻灯片不能继续。

let currentSlideIndex = 1;
showSlides(currentSlideIndex);

function currentSlide(n) {
  showSlides(currentSlideIndex = n);
}

function showSlides(n) {
  let slides = document.getElementsByClassName("slide");
  let dots = document.getElementsByClassName("dot");

  if (n > slides.length) {
    currentSlideIndex = 1;
  }
  if (n < 1) {
    currentSlideIndex = slides.length;
  }

  // Aggiornamento per l'animazione
  let slideWidth = slides[0].clientWidth;
  let moveX = -((currentSlideIndex - 1) * slideWidth);
  document.querySelector('.slides').style.transform = `translateX(${moveX}px)`;

  for (let i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }

  dots[currentSlideIndex - 1].className += " active";
}

.slide {
  flex: none;
  scroll-snap-align: start;
  width: 100%;
  transform: translateX(0);
}

.slides {
  display: flex;
  overflow: hidden;
  scroll-snap-type: x mandatory;
  transition: transform 0.5s ease-in-out;
}

.navigation {
  padding-top: 25px;
  text-align: center;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}

<div class="third-container no-on-desktop">
  <div class="slider">
    <div class="slides">
      <div class="slide" id="slide1">
        <div class="column">
          <div style="overflow: hidden; height: 250px;">
            <img src="http://resinpro.de/wp-content/uploads/2023/11/Untitled-2.png" alt="img">
          </div>
          <div>
            <p class="img-title bold">Gussteile für große Tische</p>
            <p style="color: #565656;" class="img-description">Epoxytable FIVE 5 ist die perfekte Lösung für spektakuläre Tische. Seine einzigartige Formulierung hält künstlerischen Herausforderungen stand und ermöglicht Gussstücke mit einer Dicke von bis zu 2 Zoll. Mit niedriger Exothermie und Kratzfestigkeit
              ist es ideal für die Herstellung von langlebigen Holz- und Harztischen unter allen Umweltbedingungen.</p>
          </div>
        </div>
      </div>
      <div class="slide" id="slide2">
        <div class="column">
          <div style="overflow: hidden; height: 250px;">
            <img src="http://resinpro.de/wp-content/uploads/2023/11/Untitled-3.png" alt="img">
          </div>
          <div>
            <p class="img-title bold">Für Couchtische</p>
            <p style="color: #565656;" class="img-description">Dank Epoxytable FIVE 5 werden Ihre Couchtische zu wahren Schmuckstücken. Mit diesem Harz haben Sie unendlich viele Gestaltungsmöglichkeiten, um Ihre Individualität auszudrücken und Stücke zu schaffen, die Ihren einzigartigen Geschmack und
              Stil widerspiegeln. Das Ergebnis? Ein Zuhause, das durch Eleganz und Persönlichkeit bereichert wird.</p>
          </div>
        </div>
      </div>
      <div class="slide" id="slide3">
        <div class="column">
          <div style="overflow: hidden; height: 250px;">
            <img src="http://resinpro.de/wp-content/uploads/2023/11/Untitled-4.png" alt="img">
          </div>
          <div>
            <p class="img-title bold">Für markante Tische</p>
            <p style="color: #565656;" class="img-description">Dank Epoxytable FIVE 5 sind Ihre Tische mit Meereswelleneffekt eine unglaubliche Überraschung für jeden, der Ihr Haus betritt. Dieses Harz gibt Ihnen die Möglichkeit, Stücke zu kreieren, die die Fantasie anregen und die Erfahrung Ihrer Gäste
              unvergesslich machen.</p>
          </div>
        </div>
      </div>
      <!-- Aggiungi altre slide se necessario -->
    </div>
    <div class="navigation">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>

    </div>
  </div>
</div>