swiper7缩略图使用
时间: 2024-06-14 10:04:04 浏览: 13
在Swiper 7中,你可以使用缩略图功能来实现轮播图和缩略图的联动效果。下面是一个示例代码,演示了如何在Swiper 7中使用缩略图:
```html
<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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper-container-thumbnails">
<div class="swiper-wrapper">
<!-- 缩略图的内容 -->
<div class="swiper-slide"><img src="thumbnail1.jpg" alt=""></div>
<div class="swiper-slide"><img src="thumbnail2.jpg" alt=""></div>
<div class="swiper-slide"><img src="thumbnail3.jpg" alt=""></div>
<div class="swiper-slide"><img src="thumbnail4.jpg" alt=""></div>
<div class="swiper-slide"><img src="thumbnail5.jpg" alt=""></div>
</div>
</div>
<script>
const swiper = new Swiper('.swiper-container', {
// 轮播图的配置
pagination: {
el: '.swiper-pagination',
},
thumbs: {
swiper: {
el: '.swiper-container-thumbnails',
slidesPerView: 5, // 缩略图一次展示的数量
},
},
});
</script>
```
在上面的代码中,我们使用了两个Swiper实例,一个用于轮播图,一个用于缩略图。通过`thumbs`选项,我们将缩略图Swiper实例与轮播图Swiper实例关联起来。在缩略图Swiper实例中,我们设置了`slidesPerView`选项来指定一次展示的缩略图数量。
你可以根据自己的需求修改轮播图和缩略图的内容和样式,以及配置其他的Swiper选项来实现更多的效果。