swiper缩略图垂直

Swiper 是一个流行的移动端轮播组件，可以用于展示图片或其他内容的幻灯片。如果你想要在 Swiper 中使用缩略图，可以按照以下步骤进行操作：

1. 首先确保你已经引入了 Swiper 的相关文件和样式表。

2. 在 HTML 中创建一个容器元素，用于包裹 Swiper 组件和缩略图。

<div class="swiper-container">
  <!-- 幻灯片 -->
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <!-- 其他幻灯片内容 -->
  </div>
  
  <!-- 缩略图 -->
  <div class="swiper-thumbnails">
    <div class="swiper-thumbnail">Thumbnail 1</div>
    <div class="swiper-thumbnail">Thumbnail 2</div>
    <div class="swiper-thumbnail">Thumbnail 3</div>
    <!-- 其他缩略图内容 -->
  </div>
</div>

3. 在 JavaScript 中初始化 Swiper，并在参数中设置缩略图的相关选项。

var swiper = new Swiper('.swiper-container', {
  // 其他 Swiper 配置项

  // 启用缩略图，将缩略图容器元素的选择器传递给 thumbs 参数
  thumbs: {
    swiper: {
      el: '.swiper-thumbnails',
      slidesPerView: 4, // 可见的缩略图数量
      spaceBetween: 10 // 缩略图之间的间距
    }
  }
});

这样，你就可以在 Swiper 中使用缩略图了。请根据实际情况修改 HTML 和 JavaScript 中的类名和内容，以适应你的项目需求。