1.swiper-pagination

簡(jiǎn)介Swiper - 是免費(fèi)且最現(xiàn)代化的移動(dòng)觸摸滑塊，具有硬件加速過(guò)渡和驚人的原生行為 它旨在用于移動(dòng)網(wǎng)站，移動(dòng)網(wǎng)絡(luò)應(yīng)用程序和移動(dòng)本機(jī)/混合應(yīng)用程序 主要針對(duì)iOS設(shè)計(jì)，但也適用于最新的Android，Windows Phone 8和現(xiàn)代桌面瀏覽器。工傷勞動(dòng)仲裁

2.swiper的使用

github star 20K+，最新版本4.5開源，免費(fèi)，文檔豐富，應(yīng)用廣泛的swiper，簡(jiǎn)單配置就可以實(shí)現(xiàn)PC,移動(dòng)端的各種輪播特效，如下截圖：(前端同學(xué)必須了解)

3.swiper.slideto

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

4.swiper-slide

1:1的觸摸滑動(dòng)Swiper默認(rèn)的觸摸比例為1:1，你可以通過(guò)修改Swiper的設(shè)置來(lái)改變這個(gè)比例監(jiān)視工傷勞動(dòng)仲裁器Swiper可以通過(guò)設(shè)置開啟監(jiān)視器，有了這個(gè)功能Swiper可以在你動(dòng)態(tài)改變Dom或Swiper的樣式時(shí)自動(dòng)重新初始化并計(jì)算所需的元素。

5.swiper7

豐富的APISwiper 擁有豐富的API，允許你建立自己獨(dú)特的分頁(yè)器、導(dǎo)航、視差滾動(dòng)、或其他精彩的效果真正支持RTL布局Swiper是唯一一個(gè)支持100%RTL(右向左)布局的滑動(dòng)插件可在swiper-container上加dir="rtl"。

6.swiper-slide-active

多行slides布局Swiper允許多行Slides布局，這樣每行的slide就會(huì)較少過(guò)渡效果增加了三種新的過(guò)渡效果：淡入、3D方塊、3D流雙向控制現(xiàn)在Sw工傷勞動(dòng)仲裁iper可以用來(lái)控制其他的Swiper，甚至可以同時(shí)控制。

7.swipe for

完整的導(dǎo)航控制Swiper配備了常用的導(dǎo)航控制器，包括分頁(yè)器，切換箭頭，滾動(dòng)條Flexbox布局Swiper使用流行的flexbox布局，這樣就解決了很多計(jì)算尺寸方面的問(wèn)題這種布局也允許用CSS來(lái)設(shè)定Slides。

8.swiper-container

Flexbox網(wǎng)格你可以在Swiper初始化的時(shí)候設(shè)定slide的顯示，包括每行、每列、每組數(shù)量以及他們的間距等視差過(guò)渡Swiper支持流行的視差效果，你可以將視差效果應(yīng)用于Swiper的內(nèi)部元素，如圖片、文本、標(biāo)題、背景圖等等..。

9.swiper initialsl工傷勞動(dòng)仲裁ide

圖片懶加載Swiper對(duì)非active slide內(nèi)的圖片實(shí)行延遲加載，這個(gè)功能加快了頁(yè)面的打開速度，提高了Swiper的使用體驗(yàn)虛擬 SlidesSwiper 4新增了虛擬slides特性，當(dāng)你有很多Slide或有很多內(nèi)容的slide的時(shí)候可以在DOM中只保留需要的slide。

10.swiper如何使用

其他的特性Swiper4還包含了所有swiper2的優(yōu)秀特性，包括自適應(yīng)、滾動(dòng)反彈、抵抗反彈、loop模式、嵌套Swiper使用方法(一)1.首先加載插件，需要用到的文件有swiper.min.js和swiper.min.css文件。

可下載Swiper文件或使用CDN 工傷勞動(dòng)仲裁 ... ... ...

2.HTML內(nèi)容

導(dǎo)航等組件可以放在container之外 。

3.你可能想要給Swiper定義一個(gè)大小，當(dāng)然不要也行.swiper-container { width: 600px; height: 300px; } 4.初始化Swiper：最好是挨著標(biāo)簽。

... var mySwiper = new Swiper (.swiper-container, { direction: ver工傷勞動(dòng)仲裁tical, // 垂直切換選項(xiàng) loop: true, // 循環(huán)模式選項(xiàng) // 如果需要分頁(yè)器 pagination: { el: .swiper-pagination, }, // 如果需要前進(jìn)后退按鈕 navigation: { nextEl: .swiper-button-next, prevEl: .swiper-button-prev, }, // 如果需要滾動(dòng)條 scrollbar:工傷勞動(dòng)仲裁 { el: .swiper-scrollbar, }, })

如果不能寫在HTML內(nèi)容的后面，則需要在頁(yè)面加載完成后再初始化 window.onload = function() { ... } 或者這樣（Jquery和Zepto）(推薦)。

$(document).ready(function () { ... }) 5.完成恭喜你，現(xiàn)在你的Swiper應(yīng)該已經(jīng)能正常切換了使用方法(二)安裝$ npm install swiper 工傷勞動(dòng)仲裁 。

組件使用var Swiper = require(swiper); var mySwiper = new Swiper(.swiper-container, { /* ... */ }); DEMO直接上截圖,來(lái)自中文網(wǎng)的截圖（可以自行去官網(wǎng)了解更多）