如何在单页面展示多个轮播图？W3Schools代码修改求助

Hey there! Let's sort out that issue where you can't run multiple carousels on one page using the W3Schools slider code. The root problem with the original script is that it relies on a global slideIndex variable—so when you have more than one carousel, they all fight over that single index value and break each other. Here's a simple, clean way to modify the code to support as many carousels as you need:

Step 1: Update Your HTML Structure #

First, wrap each carousel in a unique container (we'll use the class carousel-container). This lets us isolate each carousel's elements and state:

<!-- Carousel 1 -->
<div class="carousel-container">
  <button onclick="plusDivs(-1, this.parentElement)">❮</button>
  <button onclick="plusDivs(1, this.parentElement)">❯</button>
  
  <img class="mySlides" src="slide1.jpg" alt="First slide">
  <img class="mySlides" src="slide2.jpg" alt="Second slide">
  <img class="mySlides" src="slide3.jpg" alt="Third slide">
  
  <div class="dots-group">
    <span class="demo" onclick="currentDiv(1, this.parentElement.parentElement)"></span>
    <span class="demo" onclick="currentDiv(2, this.parentElement.parentElement)"></span>
    <span class="demo" onclick="currentDiv(3, this.parentElement.parentElement)"></span>
  </div>
</div>

<!-- Carousel 2 -->
<div class="carousel-container">
  <button onclick="plusDivs(-1, this.parentElement)">❮</button>
  <button onclick="plusDivs(1, this.parentElement)">❯</button>
  
  <img class="mySlides" src="slideA.jpg" alt="Slide A">
  <img class="mySlides" src="slideB.jpg" alt="Slide B">
  <img class="mySlides" src="slideC.jpg" alt="Slide C">
  
  <div class="dots-group">
    <span class="demo" onclick="currentDiv(1, this.parentElement.parentElement)"></span>
    <span class="demo" onclick="currentDiv(2, this.parentElement.parentElement)"></span>
    <span class="demo" onclick="currentDiv(3, this.parentElement.parentElement)"></span>
  </div>
</div>

Step 2: Modify the JavaScript #

We'll ditch the global slideIndex and instead store each carousel's current index directly on its container using dataset properties. This keeps each carousel's state independent:

// Initialize all carousels on page load
document.querySelectorAll('.carousel-container').forEach(container => {
  container.dataset.slideIndex = 1;
  showDivs(1, container);
});

// Navigate between slides (prev/next)
function plusDivs(n, container) {
  const currentIndex = parseInt(container.dataset.slideIndex);
  showDivs(currentIndex + n, container);
}

// Jump to a specific slide via dots
function currentDiv(n, container) {
  showDivs(n, container);
}

// Core slide display logic
function showDivs(n, container) {
  let i;
  const slides = container.getElementsByClassName("mySlides");
  const dots = container.getElementsByClassName("demo");

  // Loop index if it goes beyond slide count
  if (n > slides.length) { n = 1; }
  if (n < 1) { n = slides.length; }

  // Hide all slides
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  // Remove active state from all dots
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }

  // Show target slide and activate its dot
  slides[n - 1].style.display = "block";
  dots[n - 1].className += " active";

  // Update the container's stored index
  container.dataset.slideIndex = n;
}

Key Changes Explained #

• Isolated State: Each carousel now stores its own slideIndex in the container's dataset, so no more cross-carousel interference.
• Targeted Functions: All slider functions now take a container parameter, so they know exactly which carousel to modify.
• Batch Initialization: We initialize all carousels at once using querySelectorAll, so you don't have to manually set up each one.

You can keep using your existing CSS for .mySlides, .demo, and controls—just make sure styles are scoped if needed (though the container setup should prevent conflicts).

内容的提问来源于stack exchange，提问作者Venom