1. 在使用的時(shí)候要引入的有 swiper.min.js和swiper.min.css
2. 最簡(jiǎn)單的swiper結(jié)構(gòu)：
HTML:
<div class="swiper-container">
? ? <div class="swiper-wrapper">
? ? ? ? ?<div class="swiper-slide">slider 1</div>
? ? ? ? ?<div class="swiper-slide">slider 2</div>
? ? ? ? ?<div class="swiper-slide">slider 2</div>
? ? ?</div>
</div>
CSS
.swiper-slide{
? ? ? ? ?width: 100%;
? ? ? ? ? height: 300px;
? ? ? ? ? background-color: red;
? ? ? ? ? font-size: 60px;
? ? ? ? ? text-align: center;
? ? ? ? ? ?line-height: 300px;
? ? ? ? ? ?font-weight: bold;
}
JS
var mySwiper = new Swiper(".swiper-container");
常用的一些屬性：
* autopaly：自動(dòng)切換時(shí)間間隔（單位ms）
* autoplayDisableOnInteraction:?用戶(hù)操作swiper之后辆影，是否禁止autoplay然想，默認(rèn)是true ，禁止
* pagination 分頁(yè)器 使用方法示例 demo
* paginationType bullets 圓點(diǎn)（默認(rèn)） fraction 分式 ?paogress ? 進(jìn)度條 ? ?custom 自定義
* paginationClickable 此參數(shù)設(shè)置為true時(shí)，點(diǎn)擊分頁(yè)器的知識(shí)點(diǎn)分頁(yè)器會(huì)控制Swiper切換蛀恩，默認(rèn)（false）
* nextButton 前進(jìn)按鈕的css選擇器或者HTML元素 使用示例demo
* prevButton 使用方法同上。
* preloadImages 默認(rèn)為true ，Swpier會(huì)強(qiáng)制加載所有的圖片
* lazyLoading 設(shè)為true開(kāi)啟圖片延遲加載虑鼎，使preloadImages無(wú)效。需要將圖片img標(biāo)簽的src改寫(xiě)成data-src刃永，并且增加類(lèi)名swiper-lazy货矮。背景圖的延遲加載則增加屬性data-background（3.0.7開(kāi)始啟用）。具體使用方法
* loop 設(shè)置為true 則開(kāi)啟loop模式斯够。loop模式：會(huì)在原本slide前后復(fù)制若干個(gè)slide并在合適的時(shí)候切換囚玫，讓Swiper看起來(lái)是循環(huán)的。
* freeMode 默認(rèn)為false读规，普通模式：slide滑動(dòng)時(shí)只滑動(dòng)一格抓督，并自動(dòng)貼合wrapper，設(shè)置為true則變?yōu)閒ree模式束亏，slide會(huì)根據(jù)慣性滑動(dòng)且不會(huì)貼合铃在。
* freeModeMomentum free模式動(dòng)量。free模式下碍遍，若設(shè)置為false則關(guān)閉動(dòng)量定铜，釋放slide之后立即停止不會(huì)滑動(dòng)。詳細(xì)說(shuō)明
