JS轮播Slider点击无响应，如何修改代码使其正常运行？

问题原因 #

• 上下页的索引增减逻辑完全写反：prev（上一张）应减小索引，next（下一张）应增大索引，当前代码刚好写反
• 缺失核心的幻灯片切换渲染逻辑：changeSlide 函数仅修改了索引变量的值，没有对DOM做任何操作更新页面显示，所以点击按钮看不到任何变化

修复方案 #

先调整方向逻辑，再补充幻灯片切换的渲染代码，以下提供两种常用实现的修复代码：

方案1：显隐切换模式（最简单，无需额外CSS） #

直接控制当前激活的slide显示，其余隐藏，修复后的完整JS代码如下：

const slides = document.querySelector(".slides");
const slideList = document.querySelectorAll(".slide"); // 新增：获取所有slide元素
const slidesCount = slideList.length;
const nextBtn=document.querySelector(".next-slide");
const prevBtn=document.querySelector(".prev-slide");

let activeSlideIndex = 0
// 初始化：默认显示第一张
renderSlide()

// 按钮绑定事件
prevBtn.addEventListener('click', () => {
  changeSlide('prev')
})
  
nextBtn.addEventListener('click', () => {
  changeSlide('next')
})

function changeSlide(direction) {
  if(direction === 'prev') {
    activeSlideIndex-- // 修正：上一张索引减1
    if(activeSlideIndex < 0) {
      activeSlideIndex = slidesCount - 1
    }
  } else if(direction === 'next') {
    activeSlideIndex++ // 修正：下一张索引加1
    if(activeSlideIndex === slidesCount) {
      activeSlideIndex = 0
    }
  }
  // 切换后重新渲染
  renderSlide()
}

// 新增：渲染当前激活的幻灯片
function renderSlide() {
  slideList.forEach((slide, index) => {
    slide.style.display = index === activeSlideIndex ? 'block' : 'none'
  })
}

方案2：平移滑动模式（带过渡动画效果） #

如果你的CSS已经给.slides设置了display: flex、overflow: hidden属性，可以用translateX平移实现滑动效果，仅需替换上面的renderSlide函数即可：

function renderSlide() {
  const slideWidth = slideList[0].offsetWidth;
  slides.style.transform = `translateX(-${activeSlideIndex * slideWidth}px)`;
  slides.style.transition = 'transform 0.3s ease'; // 过渡动画效果，可自行调整时长
}

同时需要给.slide补充CSS：flex-shrink: 0; width: 100%，保证每张轮播图占满容器宽度。

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