swiper的基礎使用（十四）

這次內容我們介紹如何在swiper頁面當中開啟循環模式。
首先讓我們用累積了十四節…不十三節的功力來建造一個基本的swiper的佈局。並且根據需要來設定CSS樣式。

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 6<img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

然後到js當中進行頁面的初始化，再加上我們的循環屬性（loop：true）.

var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                paginationClickable:true,
                nextButton:'.swiper-button-next',
                prevButton:'.swiper-button-prev',
                slidesPerView:1,
                spaceBetween:30,
                loop:true  //开启循环属性
            });

完成之後我們就可以一直進行翻頁了，能玩三天三夜，還不會累！

以上就是swiper的基礎使用（十四）的內容，更多相關內容請關注PHP中文網（www.php.cn）！