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)畫(transition),從而產(chǎn)生切換動(dòng)畫效果。
Swiper擁有靈活的progress,這是自定義制作3D切換效果的利器
Swiper制作3D切換效果的方法多種多樣。cube、coverflow和flip可以輕松的實(shí)現(xiàn)3D過(guò)渡,如果你想制作其他新穎的切換方式,推薦使用progress。
progress可以幫助你獲取到滑塊的進(jìn)度索引。
在Swiper上加些小動(dòng)畫,制作時(shí)下最流行的微展示
使用Swiper再配合一些你喜歡的小動(dòng)畫,你的圖片立即變成活靈活現(xiàn)的微場(chǎng)景、微海報(bào)。
常用的制作動(dòng)畫的方法有CSS3、GreenSock、Anime.js、animate.css等。也推薦使用我們的Swiper Animate小插件,無(wú)需學(xué)習(xí)即可快速制作出精美的切換動(dòng)畫效果。
Swiper Animate有大量的demo,下載后進(jìn)行簡(jiǎn)單修改即可,是伸手黨的最愛(ài)。
Swiper 5 的特色功能

下載文件中提供 swiper5 完整包,包含Swiper5的全部基礎(chǔ)演示和未壓縮的js、css文件