swiper輪播圖（逆向自動切換類似於無限循環）

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>