如何实现轮播图侧边prev/next按钮切换并保留底部导航按钮

你现有代码已经完成了底部导航按钮的逻辑，只需要补充前后按钮的事件绑定，同时把重复的切换逻辑抽离复用即可，不需要修改现有HTML结构。

核心修改点 #

• 新增变量记录当前激活的幻灯片索引
• 抽离公共的幻灯片切换函数，统一处理选中状态更新、边界循环逻辑
• 分别给#prevBtn、#nextBtn绑定点击事件，调用公共切换函数完成跳转
• 原有底部导航按钮的逻辑保留，切换时自动同步激活状态

完整修改后JavaScript代码 #

document.querySelectorAll(".carousel").forEach((carousel) => {
  const items = carousel.querySelectorAll(".carousel__item");
  const buttonsHtml = Array.from(items, () => {
    return `<span class="carousel__button"></span>`;
  });

  carousel.insertAdjacentHTML(
    "beforeend",
    `
        <div class="carousel__nav">
            ${buttonsHtml.join("")}
        </div>
    `
  );

  const buttons = carousel.querySelectorAll(".carousel__button");
  const prevBtn = carousel.querySelector("#prevBtn");
  const nextBtn = carousel.querySelector("#nextBtn");
  // 记录当前展示的幻灯片索引，初始为第一张
  let activeIndex = 0;

  /**
   * 公共切换函数
   * @param {number} targetIndex 要跳转到的幻灯片索引
   */
  function switchSlide(targetIndex) {
    // 循环边界处理：到第一张再点上一张跳最后一张，到最后一张再点下一张回第一张
    if (targetIndex < 0) targetIndex = items.length - 1;
    if (targetIndex >= items.length) targetIndex = 0;

    // 清除所有项的选中状态
    items.forEach(item => item.classList.remove("carousel__item--selected"));
    buttons.forEach(btn => btn.classList.remove("carousel__button--selected"));

    // 激活目标项和对应底部按钮
    items[targetIndex].classList.add("carousel__item--selected");
    buttons[targetIndex].classList.add("carousel__button--selected");

    // 更新当前激活索引
    activeIndex = targetIndex;
  }

  // 底部导航按钮绑定事件
  buttons.forEach((button, i) => {
    button.addEventListener("click", () => switchSlide(i));
  });

  // 上一张按钮事件
  prevBtn.addEventListener("click", () => switchSlide(activeIndex - 1));

  // 下一张按钮事件
  nextBtn.addEventListener("click", () => switchSlide(activeIndex + 1));

  // 初始化默认选中第一张
  switchSlide(0);
});

配套样式（实现两侧+底部按钮定位） #

添加以下CSS即可实现参考图的按钮布局效果：

/* 给轮播容器加相对定位，作为按钮定位的父级 */
.carousel {
  position: relative;
  overflow: hidden;
}

/* 两侧按钮通用样式 */
#prevBtn, #nextBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  /* 可根据设计调整按钮大小、边框、背景样式 */
}

/* 上一张按钮固定在左侧 */
#prevBtn {
  left: 20px;
}

/* 下一张按钮固定在右侧 */
#nextBtn {
  right: 20px;
}

/* 底部导航固定在容器底部居中 */
.carousel__nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}

实现后点击两侧按钮、底部按钮都会同步更新幻灯片和按钮激活状态，首尾页循环切换不会出现失效问题，原有功能完全保留。

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