Swiper Thumbs(缩略图) - 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

效果演示

slider1
slider2
slider3
slider4

使用方法示例

从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>