博客

swiper插件轮播图，默认的轮播循序是会从右向左，第一张，第二张，第三张，然后肉眼可见是的从第三张从左到右倒回第一张，这样就会有些视觉体验不高，

，不过还是能够用swiper本身的特性更改成无限循环的轮播的。

<!--HTML代码-->
<div class="course-banner-box">
    <div class="swiper-container">
        <div class="swiper-wrapper"> <!--四张轮播图-->
            <div class="swiper-slide slide1"></div>
            <div class="swiper-slide slide2"></div>
            <div class="swiper-slide slide3"></div>
            <div class="swiper-slide slide4"></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="button-box">
            <div class="button"> <!--左右按钮-->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>

        </div>

    </div>
</div>

<!--script代码-->

<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',//pagination分页器
        nextButton: '.swiper-button-next',//前进后退按钮
        prevButton: '.swiper-button-prev',
        paginationClickable: true,//参数设置为true时，点击分页器的指示点分页器会控制Swiper切换
        spaceBetween: 30,//slide之间的距离（单位px）。
        centeredSlides: true,//设定为true时，活动块会居中，而不是默认状态下的居左。
        loop : true,//复制多份循环(这里就是让轮播看起来是循环的，去掉这个就恢复了默认的swiper轮播)
        autoplay: 3000,//自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。
        autoplayDisableOnInteraction: false//点击后打断auto-play
    });
</script>