Swiper能實(shí)現(xiàn)觸屏焦點(diǎn)圖、觸屏Tab切換、觸屏多圖切換等常用效果。
Swiper開(kāi)源、免費(fèi)、穩(wěn)定、使用簡(jiǎn)單、功能強(qiáng)大，是架構(gòu)移動(dòng)終端網(wǎng)站的重要選擇！
Swiper 的結(jié)構(gòu)和基礎(chǔ)原理
Swiper 的每個(gè)展示塊（屏）為一個(gè)slide，slide中放置圖片或文字等展示的內(nèi)容，全部slide排成一行(或多行)包含在包裝器wrapper中，而總?cè)萜鱟ontainer 又包裹著wrapper和箭頭按鈕控件navigation以及分頁(yè)器控件pagination。
當(dāng)手指（或鼠標(biāo)）觸摸滑動(dòng)Swiper時(shí)，Swiper在瀏覽器每一幀通過(guò)計(jì)算滑動(dòng)的距離差對(duì)wrapper進(jìn)行位移（transform）從而產(chǎn)生拖動(dòng)的效果。在手指（或鼠標(biāo)）釋放時(shí)，計(jì)算下一個(gè)slide的起始位置對(duì)wrapper設(shè)置位移動(dòng)畫(huà)（transition），從而產(chǎn)生切換動(dòng)畫(huà)效果。
Swiper擁有靈活的progress，這是自定義制作3D切換效果的利器
Swiper制作3D切換效果的方法多種多樣。cube、coverflow和flip可以輕松的實(shí)現(xiàn)3D過(guò)渡，如果你想制作其他新穎的切換方式，推薦使用progress。
progress可以幫助你獲取到滑塊的進(jìn)度索引。
在Swiper上加些小動(dòng)畫(huà)，制作時(shí)下最流行的微展示
使用Swiper再配合一些你喜歡的小動(dòng)畫(huà)，你的圖片立即變成活靈活現(xiàn)的微場(chǎng)景、微海報(bào)。
常用的制作動(dòng)畫(huà)的方法有CSS3、GreenSock、Anime.js、animate.css等。也推薦使用我們的Swiper Animate小插件，無(wú)需學(xué)習(xí)即可快速制作出精美的切換動(dòng)畫(huà)效果。
Swiper Animate有大量的demo，下載后進(jìn)行簡(jiǎn)單修改即可，是伸手黨的最愛(ài)。
Swiper 5 的特色功能
下載文件中提供 swiper5 完整包，包含Swiper5的全部基礎(chǔ)演示和未壓縮的js、css文件