解决Swiper4(缩略图控制 / 无限循环)缩略图小于4张出错解决方法

#这段代码和官方案例有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;  
}; 

你可能感兴趣的:(js代码,swiper,swiper缩略图控制)