swiper的基礎使用（十四）

本文爲H5EDU機構官方的HTML5培訓教程 swiper教程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強化教程：http://h5edu.cn/index.php?c=index&a=step&lessonid=893