Swiper Slider 9.0.5：如何在导航旁显示上/下张幻灯片缩略图

1. 调整HTML结构 #

自定义导航按钮，并在幻灯片中通过data属性存储对应缩略图路径：

<!-- 自定义导航控件 -->
<div class="swiper-custom-nav">
  <button class="swiper-custom-prev">
    <span class="nav-arrow">←</span>
    <img class="nav-thumb" src="" alt="上一张缩略图">
  </button>
  <button class="swiper-custom-next">
    <img class="nav-thumb" src="" alt="下一张缩略图">
    <span class="nav-arrow">→</span>
  </button>
</div>

<!-- 主轮播容器 -->
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="slide1.jpg" alt="主幻灯片1">
      <!-- 存储缩略图路径的隐藏元素 -->
      <div class="slide-thumb-data" data-thumb="thumb1.jpg"></div>
    </div>
    <div class="swiper-slide">
      <img src="slide2.jpg" alt="主幻灯片2">
      <div class="slide-thumb-data" data-thumb="thumb2.jpg"></div>
    </div>
    <!-- 更多幻灯片按此格式添加 -->
  </div>
</div>

2. 编写CSS样式 #

调整导航按钮布局，让缩略图与箭头并排显示：

.swiper-custom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  pointer-events: none;
}

.swiper-custom-prev, .swiper-custom-next {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  pointer-events: all;
}

.nav-thumb {
  width: 70px;
  height: 45px;
  object-fit: cover;
  border-radius: 3px;
}

/* 隐藏幻灯片里的缩略图存储元素 */
.slide-thumb-data {
  display: none;
}

3. 初始化Swiper并实现缩略图更新逻辑 #

通过监听幻灯片切换事件，动态更新导航按钮里的缩略图：

const swiper = new Swiper('.mySwiper', {
  // 保留你原有的轮播配置（如autoplay、effect等）
  navigation: {
    nextEl: '.swiper-custom-next',
    prevEl: '.swiper-custom-prev',
  },
  // 监听初始化和幻灯片切换事件
  on: {
    init() {
      updateNavThumbs(this);
    },
    slideChange() {
      updateNavThumbs(this);
    }
  }
});

// 核心：更新导航缩略图的函数
function updateNavThumbs(swiperIns) {
  const prevThumbEl = document.querySelector('.swiper-custom-prev .nav-thumb');
  const nextThumbEl = document.querySelector('.swiper-custom-next .nav-thumb');
  
  // 计算上一张、下一张幻灯片的索引（兼容非循环模式）
  const totalSlides = swiperIns.slides.length;
  const prevIndex = swiperIns.activeIndex === 0 ? totalSlides - 1 : swiperIns.activeIndex - 1;
  const nextIndex = swiperIns.activeIndex === totalSlides - 1 ? 0 : swiperIns.activeIndex + 1;
  
  // 获取对应幻灯片的缩略图地址
  const prevThumbSrc = swiperIns.slides[prevIndex].querySelector('.slide-thumb-data').dataset.thumb;
  const nextThumbSrc = swiperIns.slides[nextIndex].querySelector('.slide-thumb-data').dataset.thumb;
  
  // 更新缩略图
  prevThumbEl.src = prevThumbSrc;
  nextThumbEl.src = nextThumbSrc;
}

注意事项 #

• 若开启loop: true循环模式，Swiper会复制幻灯片，此时需要给原始幻灯片添加标识类（如original-slide），在计算索引时只针对原始幻灯片处理，避免读取复制幻灯片的空数据。
• 可根据需求调整CSS里的缩略图尺寸、按钮样式，适配页面布局。

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