Swiper.js 如何仅在最后一轨上移动活动缩略图？

javascript

2024-03-22 07:43:23

## 如何在 Swiper.js 中实现活动缩略图，仅在最后一轨上移动

### 问题

在使用 Swiper.js 创建幻灯片时，希望显示活动的缩略图。但是，缩略图总是移动，即使它们位于最后一轨上也不例外。

### 解决方案

步骤 1：准备 HTML 结构

首先，创建一个用于缩略图的 Swiper 容器，以及一个用于主幻灯片的 Swiper 容器。

步骤 2：初始化 Swiper.js

初始化两个 Swiper 实例，一个是用于缩略图的自由模式 Swiper，另一个是用于主幻灯片的 Swiper。为后者启用导航控件，并配置缩略图功能。

步骤 3：自定义样式

为了使缩略图保持固定并在最后一轨上移动，需要添加一些 CSS 样式。

步骤 4：处理最后一轨逻辑

在 JavaScript 中，添加一个监听器来处理最后一轨的逻辑。当到达最后一轨时，禁用缩略图 Swiper 的前进滑动功能。

### 完整代码

<!-- 缩略图 Swiper -->
<div class="swiper-container mySwiper1">
  <div class="swiper-wrapper">
    <div class="swiper-slide">缩略图 1</div>
    <div class="swiper-slide">缩略图 2</div>
    <div class="swiper-slide">缩略图 3</div>
    <div class="swiper-slide">缩略图 4</div>
  </div>
</div>

<!-- 主幻灯片 Swiper -->
<div class="swiper-container mySwiper2">
  <div class="swiper-wrapper">
    <div class="swiper-slide">幻灯片 1</div>
    <div class="swiper-slide">幻灯片 2</div>
    <div class="swiper-slide">幻灯片 3</div>
    <div class="swiper-slide">幻灯片 4</div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

/* 保持缩略图固定 */
.mySwiper1 {
  position: fixed;
  top: 10px;
  left: 10px;
}

/* 在最后一轨上移动缩略图 */
.mySwiper2 .swiper-slide-thumb-active {
  transform: translateX(-100%) !important;
}

const swiper1 = new Swiper('.mySwiper1', {
  spaceBetween: 10,
  slidesPerView: 4,
  freeMode: true,
  watchSlidesProgress: true,
});

const swiper2 = new Swiper('.mySwiper2', {
  spaceBetween: 10,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  thumbs: {
    swiper: swiper1,
  },
});

swiper2.on('slideChange', () => {
  const activeIndex = swiper2.activeIndex;
  const totalSlides = swiper2.slides.length;

  if (activeIndex === totalSlides - 1) {
    swiper1.allowSlideNext = false;
  } else {
    swiper1.allowSlideNext = true;
  }
});