#这段代码和官方案例有3处修改,Swiper4版本
#1、做了页面上是否有“swiper-container”的判断,目的防止页面上没有类名出现js报错。
#2、定义了“num”变量,目的给loopedSlides传动态值,这样改变swiper-slide的数量时不用再去修改它。
#3、判断了swiper-slide的数量是否大于3个,并给缩略图中的swiper都加进centeredSlides: true值,目的解决swiper上小于3张图片时出现一系列的问题。
if ($('.swiper-container').length > 0) {
var num = $('.gallery-top').find('.swiper-slide').length;
if (num > 3) {
var galleryTop = new Swiper('.gallery-top', {
loop: true,
loopedSlides: num,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
slidesPerView: 5,
loop: true,
loopedSlides: num,
centeredSlides: true,
slideToClickedSlide: true,
});
} else {
var galleryTop = new Swiper('.gallery-top', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
centeredSlides: true,
slidesPerView: 'auto',
slideToClickedSlide: true,
});
}
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
};