swiper是一款非常好用的觸控滑動(dòng)插件，它能夠幫助用戶處理內(nèi)容滑動(dòng)，并支持自定義選項(xiàng)，你可以讓它自動(dòng)滾動(dòng)。控制滾動(dòng)間隔和返回回調(diào)函數(shù)等，是H5前端工程師的必備軟件之一。

　　swiper是目前應(yīng)用較廣泛的移動(dòng)端網(wǎng)頁(yè)觸摸內(nèi)容滑動(dòng)js插件，同時(shí)swiper也是目前公認(rèn)的最好的移動(dòng)觸摸滑動(dòng)插件。

【軟件功能】

　　1、不依賴框架

　　Swiper無(wú)需加載任何公共庫(kù)（如jquery）即可運(yùn)行，這保證了Swiper的輕量和運(yùn)行速度。Swiper也可以在加載了公共庫(kù)的環(huán)境下安全的運(yùn)行，如jQuery, Zepto, jQuery Mobile等

　　2、1:1的觸摸滑動(dòng)

　　Swiper默認(rèn)的觸摸比例為1:1，你可以通過(guò)修改Swiper的設(shè)置來(lái)改變這個(gè)比例。

　　3、監(jiān)視器

　　Swiper可以通過(guò)設(shè)置開啟監(jiān)視器，有了這個(gè)功能Swiper可以在你動(dòng)態(tài)改變Dom或Swiper的樣式時(shí)自動(dòng)重新初始化并計(jì)算所需的元素。

　　4、豐富的API

　　Swiper 擁有豐富的API，允許你建立自己獨(dú)特的分頁(yè)器、導(dǎo)航、視差滾動(dòng)、或其他精彩的效果

　　5、真正支持RTL布局

　　Swiper是唯一一個(gè)支持100%RTL布局的滑動(dòng)插件?？稍趕wiper-container上加dir="rtl"。

　　6、多行slides布局

　　Swiper允許多行Slides布局，這樣每行的slide就會(huì)較少。

　　7、過(guò)渡效果

　　增加了三種新的過(guò)渡效果：淡入、3D方塊、3D流。

　　8、雙向控制

　　現(xiàn)在Swiper可以用來(lái)控制其他的Swiper，甚至可以同時(shí)控制。

　　9、完整的導(dǎo)航控制

　　Swiper配備了常用的導(dǎo)航控制器，包括分頁(yè)器，切換箭頭，滾動(dòng)條。

　　10、Flexbox布局

　　Swiper使用流行的flexbox布局，這樣就解決了很多計(jì)算尺寸方面的問(wèn)題。這種布局也允許用CSS來(lái)設(shè)定Slides。

　　11、Flexbox網(wǎng)格

　　你可以在Swiper初始化的時(shí)候設(shè)定slide的顯示，包括每行、每列、每組數(shù)量以及他們的間距等。

　　12、視差過(guò)渡

　　Swiper支持流行的視差效果，你可以將視差效果應(yīng)用于Swiper的內(nèi)部元素，如圖片、文本、標(biāo)題、背景圖等等..

　　13、圖片懶加載

　　Swiper對(duì)非active slide內(nèi)的圖片實(shí)行延遲加載，這個(gè)功能加快了頁(yè)面的打開速度，提高了Swiper的使用體驗(yàn)。

　　14、虛擬 Slides

　　Swiper 4新增了虛擬slides特性，當(dāng)你有很多Slide或有很多內(nèi)容的slide的時(shí)候可以在DOM中只保留需要的slide。

　　15、其他的特性

　　Swiper4還包含了所有swiper2的優(yōu)秀特性，包括自適應(yīng)、滾動(dòng)反彈、抵抗反彈、loop模式、嵌套Swiper。

【軟件特點(diǎn)】

　　1、Swiper常用于移動(dòng)端網(wǎng)站的內(nèi)容觸摸滑動(dòng)

　　Swiper是純javascript打造的滑動(dòng)特效插件，面向手機(jī)、平板電腦等移動(dòng)終端。

　　Swiper能實(shí)現(xiàn)觸屏焦點(diǎn)圖、觸屏Tab切換、觸屏多圖切換等常用效果。

　　Swiper開源、免費(fèi)、穩(wěn)定、使用簡(jiǎn)單、功能強(qiáng)大，是架構(gòu)移動(dòng)終端網(wǎng)站的重要選擇！

　　2、Swiper擁有靈活的progress，這是自定義制作3D切換效果的利器

　　Swiper制作3D切換效果的方法多種多樣。cube、coverflow和flip可以輕松的實(shí)現(xiàn)3D過(guò)渡，如果你想制作其他新穎的切換方式，推薦使用progress。

　　progress可以幫助你獲取到滑塊的進(jìn)度索引。

　　3、在Swiper上加些小動(dòng)畫，制作時(shí)下最流行的微展示

　　使用Swiper再配合一些你喜歡的小動(dòng)畫，你的圖片立即變成活靈活現(xiàn)的微場(chǎng)景、微海報(bào)。

　　常用的制作動(dòng)畫的方法有CSS3、TweenMax、Anime.js、animate.css等。也推薦使用我們的Swiper Animate小插件，無(wú)需學(xué)習(xí)即可快速制作出精美的切換動(dòng)畫效果。

　　Swiper Animate有大量的demo，下載后進(jìn)行簡(jiǎn)單修改即可，是伸手黨的最愛。

【使用方法】

　　1、首先加載插件，需要用到的文件有swiper.min.js和swiper.min.css文件。

　　2、HTML內(nèi)容。

　　3、你可能想要給Swiper定義一個(gè)大小，當(dāng)然不要也行。

　　4、初始化Swiper：最好是挨著</body>標(biāo)簽

　　如果不能寫在HTML內(nèi)容的后面，則需要在頁(yè)面加載完成后再初始化。

　　或者這樣（Jquery和Zepto）(推薦)

　　5、完成。恭喜你，現(xiàn)在你的Swiper應(yīng)該已經(jīng)能正常切換了。