swiper轮播图（逆向自动切换类似于无限循环）

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

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

<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>
        
        <div class="swiper-pagination">div>
        
        <div class="button-box">
            <div class="button"> 
                <div class="swiper-button-next">div>
                <div class="swiper-button-prev">div>
            div>

        div>

    div>
div>



<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>

 

转载于:https://www.cnblogs.com/zxcc/p/7591736.html