如何在同一页面实现两个同class的独立Slider轮播？

你的问题出在原JS代码用了全局索引和全局选中所有slide元素，导致两个轮播被统一控制。下面是修改后的代码，不需要改动任何class，就能让两个轮播各自独立运行：

原HTML代码（无需修改） #

<div class="abelhabil-sildeshow">
  <div class="slide">
    <img src="http://localhost/wp-content/uploads/2023/01/img_lights_wide.jpg">
  </div>
  <div class="slide">
    <img src="http://localhost/wp-content/uploads/2023/01/img_snow_wide.jpg">
  </div>
  <div class="slide">
    <img src="http://localhost/wp-content/uploads/2023/01/img_nature_wide.jpg">
  </div>
</div>
<div class="abelhabil-sildeshow">
  <div class="slide">
    <img src="http://localhost/wp-content/uploads/2023/01/img_lights_wide.jpg">
  </div>
  <div class="slide">
    <img src="http://localhost/wp-content/uploads/2023/01/img_snow_wide.jpg">
  </div>
  <div class="slide">
    <img src="http://localhost/wp-content/uploads/2023/01/img_nature_wide.jpg">
  </div>
</div>

修改后的JS代码 #

// 获取所有轮播容器
const sliders = document.querySelectorAll(".abelhabil-sildeshow");

// 为每个轮播单独初始化索引并启动轮播
sliders.forEach(slider => {
  slider.dataset.slideIndex = 0;
  showSlides(slider);
});

function showSlides(slider) {
  // 只获取当前轮播容器内的slide元素
  const slides = slider.querySelectorAll(".slide");
  let slideIndex = parseInt(slider.dataset.slideIndex);

  // 隐藏当前轮播内的所有图片
  slides.forEach(slide => slide.style.display = "none");

  slideIndex++;
  // 超过当前轮播的图片数量就重置索引
  if (slideIndex > slides.length) slideIndex = 1;

  // 显示当前图片
  slides[slideIndex - 1].style.display = "block";
  // 更新当前轮播的索引
  slider.dataset.slideIndex = slideIndex;

  // 继续当前轮播的定时切换
  setTimeout(() => showSlides(slider), 1000);
}

关键修改说明 #

• 去掉了全局的slideIndex，改用每个轮播容器的dataset存储自身的索引，保证两个轮播的状态互不干扰
• 每次只操作单个轮播容器内的.slide元素，不再全局选中所有slide
• 为每个轮播单独启动定时轮播逻辑，各自独立运行

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