Swiper JS分页：将默认圆点替换为商品缩略图实现方法求助

方法一：自定义分页器渲染 #

直接利用Swiper的自定义分页功能，把默认圆点替换为缩略图，无需额外创建第二个Swiper。

步骤1：更新HTML结构 #

给每个主图slide添加data-thumb属性，存储对应缩略图的URL：

<div class="swiper swiper--product">
  <div class="swiper-wrapper">
    <div class="swiper-slide" data-thumb="thumb1.jpg">
      <img src="main1.jpg" alt="商品图1">
    </div>
    <div class="swiper-slide" data-thumb="thumb2.jpg">
      <img src="main2.jpg" alt="商品图2">
    </div>
    <div class="swiper-slide" data-thumb="thumb3.jpg">
      <img src="main3.jpg" alt="商品图3">
    </div>
  </div>
  <!-- 分页容器 -->
  <div class="swiper-pagination"></div>
  <!-- 导航按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

步骤2：修改Swiper初始化代码 #

设置分页类型为custom，通过renderCustom生成带缩略图的分页项，同时绑定点击切换事件：

const swiper = new Swiper('.swiper--product', {
  loop: true,
  spaceBetween: 15,
  pagination: {
    el: '.swiper-pagination',
    type: 'custom',
    // 自定义渲染分页项
    renderCustom: function(swiper, current, total) {
      let paginationHTML = '';
      swiper.slides.forEach((slide, index) => {
        const thumbUrl = slide.dataset.thumb;
        const isActive = index === (current - 1) ? 'swiper-pagination-thumb-active' : '';
        paginationHTML += `<div class="swiper-pagination-thumb ${isActive}" data-index="${index}">
          <img src="${thumbUrl}" alt="缩略图${index+1}">
        </div>`;
      });
      return paginationHTML;
    },
    clickable: true,
    bulletClass: 'swiper-pagination-thumb',
    bulletActiveClass: 'swiper-pagination-thumb-active'
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // 监听slide切换，更新分页激活状态
  on: {
    slideChange: function() {
      document.querySelectorAll('.swiper-pagination-thumb').forEach(el => {
        el.classList.remove('swiper-pagination-thumb-active');
      });
      const activeIndex = this.realIndex;
      document.querySelectorAll('.swiper-pagination-thumb')[activeIndex].classList.add('swiper-pagination-thumb-active');
    }
  }
});

步骤3：添加CSS样式 #

调整缩略图分页的布局和激活状态样式：

.swiper-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

.swiper-pagination-thumb {
  width: 60px;
  height: 60px;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
}

.swiper-pagination-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-pagination-thumb-active {
  border-color: #007bff;
}

方法二：双Swiper联动（主图+缩略图Swiper） #

创建两个独立Swiper，一个展示主图，一个展示缩略图，通过thumbs配置实现联动，适合需要复杂缩略图布局的场景。

步骤1：HTML结构 #

<!-- 主图Swiper -->
<div class="swiper swiper--product">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="main1.jpg" alt="商品图1">
    </div>
    <div class="swiper-slide">
      <img src="main2.jpg" alt="商品图2">
    </div>
    <div class="swiper-slide">
      <img src="main3.jpg" alt="商品图3">
    </div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<!-- 缩略图Swiper -->
<div class="swiper swiper--thumbnails">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="thumb1.jpg" alt="缩略图1">
    </div>
    <div class="swiper-slide">
      <img src="thumb2.jpg" alt="缩略图2">
    </div>
    <div class="swiper-slide">
      <img src="thumb3.jpg" alt="缩略图3">
    </div>
  </div>
</div>

步骤2：Swiper初始化代码 #

先初始化缩略图Swiper，再在主图Swiper中配置关联：

// 初始化缩略图Swiper
const thumbnailSwiper = new Swiper('.swiper--thumbnails', {
  loop: true,
  spaceBetween: 8,
  slidesPerView: 3,
  freeMode: true,
  watchSlidesProgress: true,
});

// 初始化主图Swiper并关联缩略图
const mainSwiper = new Swiper('.swiper--product', {
  loop: true,
  spaceBetween: 15,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  thumbs: {
    swiper: thumbnailSwiper,
  }
});

步骤3：CSS样式 #

.swiper--thumbnails {
  width: 80%;
  margin: 10px auto 0;
}

.swiper--thumbnails .swiper-slide {
  width: 60px;
  height: 60px;
  opacity: 0.5;
  cursor: pointer;
  overflow: hidden;
}

.swiper--thumbnails .swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid #007bff;
}

.swiper--thumbnails .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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