Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。
Swiper開源、免費、穩定、使用簡單、功能強大,是架構移動終端網站的重要選擇!
Swiper 的結構和基礎原理
Swiper 的每個展示塊(屏)為一個slide,slide中放置圖片或文字等展示的內容,全部slide排成一行(或多行)包含在包裝器wrapper中,而總容器container 又包裹著wrapper和箭頭按鈕控件navigation以及分頁器控件pagination。
當手指(或鼠標)觸摸滑動Swiper時,Swiper在瀏覽器每一幀通過計算滑動的距離差對wrapper進行位移(transform)從而產生拖動的效果。在手指(或鼠標)釋放時,計算下一個slide的起始位置對wrapper設置位移動畫(transition),從而產生切換動畫效果。
Swiper擁有靈活的progress,這是自定義制作3D切換效果的利器
Swiper制作3D切換效果的方法多種多樣。cube、coverflow和flip可以輕松的實現3D過渡,如果你想制作其他新穎的切換方式,推薦使用progress。
progress可以幫助你獲取到滑塊的進度索引。
在Swiper上加些小動畫,制作時下最流行的微展示
使用Swiper再配合一些你喜歡的小動畫,你的圖片立即變成活靈活現的微場景、微海報。
常用的制作動畫的方法有CSS3、GreenSock、Anime.js、animate.css等。也推薦使用我們的Swiper Animate小插件,無需學習即可快速制作出精美的切換動畫效果。
Swiper Animate有大量的demo,下載后進行簡單修改即可,是伸手黨的最愛。
Swiper 5 的特色功能

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