swiper
设置作为缩略图的swiper对象。
有以下两种设置方式：
1.先初始化缩略图Swiper，再初始化主图Swiper
有以下两种设置方式：
1.先初始化缩略图Swiper，再初始化主图Swiper
var thumbsSwiper = new Swiper('.swiper-thumbs', {
slidesPerView: 5,
});
var mySwiper = new Swiper('.swiper', {
...
thumbs: {
swiper: thumbsSwiper
}
});
2.初始化主图Swiper的时候同时初始化缩略图Swiper
var mySwiper = new Swiper('.swiper', {
...
thumbs: {
swiper: {
el: '.swiper-thumbs', //注意此处的设置方式
slidesPerView: 5,
...
}
}
});
swiper信息
- 类型：
- object Swiper
- 启用版本：
- 4.4.0
效果演示
使用方法示例
从Swiper7开始，容器默认类名由'.swiper-container'变更为'.swiper'。
<script language="javascript">
var gallerySwiper = new Swiper('#gallery',{
spaceBetween: 10,
thumbs: {
swiper: {
el: '#thumbs',
spaceBetween: 10,
slidesPerView: 4,
watchSlidesVisibility: true,/*避免出现bug*/
},
}
})
/*或者*/
var thumbsSwiper = new Swiper('#thumbs',{
spaceBetween: 10,
slidesPerView: 4,
watchSlidesVisibility: true,/*避免出现bug*/
})
var gallerySwiper = new Swiper('#gallery',{
spaceBetween: 10,
thumbs: {
swiper: thumbsSwiper,
}
})
</script>转载原创文章请注明：文章转载自：Swiper中文网 [https://www.swiper.com.cn]
本文地址：https://www.swiper.com.cn/api/thumbs/2018/0916/432.html