基于swiper的缩略图轮播

效果图示.jpg

首先引入swiper

 <link rel="stylesheet" href="resources/swiper-4.4.1/css/swiper.css">
<script type="text/javascript" src="resources/swiper-4.4.1/js/swiper.min.js"></script>

html部分

<div class="pc-slide">
    <div class="view">
        <div class="swiper-container">
            <a class="arrow arrow-left" href="#"></a>
            <a class="arrow arrow-right" href="#"></a>
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a target="_blank"><img src="resources/images/big-1.png" alt=""></a>
                </div>
                <div class="swiper-slide">
                    <a target="_blank"><img src="resources/images/big-2.png" alt=""></a>
                </div>
                <div class="swiper-slide">
                    <a target="_blank"><img src="resources/images/big-3.png" alt=""></a>
                </div>
                <div class="swiper-slide">
                    <a target="_blank"><img src="resources/images/big-4.png" alt=""></a>
                </div>
                <div class="swiper-slide">
                    <a target="_blank"><img src="resources/images/big-5.png" alt=""></a>
                </div>
            </div>
        </div>
    </div>
    <div class="preview">
        <a class="arrow arrow-left" href="#"></a>
        <a class="arrow arrow-right" href="#"></a>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide active-nav">
                    <img src="resources/images/small-01.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="resources/images/small-02.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="resources/images/small-03.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="resources/images/small-04.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="resources/images/small-05.png" alt="">
                </div>
            </div>
        </div>
    </div>
</div>

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())
            }
        }
    }