基于swiper的缩略图轮播

效果图示.jpg

首先引入swiper

html部分

css样式部分

.view .swiper-container { height: 620px;width: 100%; }
.view:hover .arrow{display: block;}
.view .arrow{display: none;position: absolute;top: 50%;margin-top: -35px;width: 70px;height: 70px;z-index: 10; }
.view .arrow-left {background: url("../images/culture/pre.png") no-repeat center; left: 10px;}
.view .arrow-right {background: url("../images/culture/next.png") no-repeat center; right: 10px;}
.preview { padding: 0 30px;width: 100%;margin-top: 10px;position: relative;}
.preview .swiper-slide {padding: 0 12px;width: 23%;height: 100%;}
.preview .arrow{position: absolute;top: 50%;margin-top: -9px;width: 9px; height: 18px;z-index: 10;}
.preview .arrow-left {background: url("../images/culture/arrow-left.png") no-repeat center;left: 10px;}
.preview .arrow-right {background: url("../images/culture/arrow-right.png") no-repeat center;right: 10px;}
.preview img {padding: 1px;}
.preview .active-nav img {padding: 0;border: 1px solid #FF3E3E;}

js部分

    var viewSwiper = new Swiper('.view .swiper-container', {
        autoplay: {
            delay: 4500,
            disableOnInteraction: false,
        },
        on:{
            slideChangeTransitionStart: function() {
                updateNavPosition()
            }
        }
    });

    $('.view .arrow-left,.preview .arrow-left').on('click', function(e) {
        e.preventDefault();
        if (viewSwiper.activeIndex == 0) {
            viewSwiper.slideTo(viewSwiper.slides.length - 1, 1000);
            return
        }
        viewSwiper.slidePrev()
    });
    $('.view .arrow-right,.preview .arrow-right').on('click', function(e) {
        e.preventDefault();
        if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
            viewSwiper.slideTo(0, 1000);
            return
        }
        viewSwiper.slideNext()
    });

    var previewSwiper = new Swiper('.preview .swiper-container', {
        //visibilityFullFit: true,
        slidesPerView: '3.7',
        allowTouchMove: false,
        on:{
            tap: function() {
                viewSwiper.slideTo(previewSwiper.clickedIndex)
            }
        }
    });

    function updateNavPosition() {
        $('.preview .active-nav').removeClass('active-nav');
        var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav');
        if (!activeNav.hasClass('swiper-slide-visible')) {
            if (activeNav.index() > previewSwiper.activeIndex) {
                var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1;
                previewSwiper.slideTo(activeNav.index() - thumbsPerNav)
            } else {
                previewSwiper.slideTo(activeNav.index())
            }
        }
    }