這次帶給大家Swiper 4.x 在行動端中根據內容觸摸滑動功能的實現,Swiper 4.x 在行動端根據內容觸摸滑動實現的注意事項有哪些,下面就是實戰案例,一起來看一下。
Swiper是純javascript打造的滑動特效插件,面向手機、平板電腦等行動終端。
Swiper能實現觸控螢幕焦點圖、觸控螢幕Tab切換、觸控螢幕多圖切換等常用效果。
Swiper開源、免費、穩定、使用簡單、功能強大,是架構行動終端網站的重要選擇!
1.先載入插件,需要用到的檔案有swiper.min.js和swiper.min.css檔案。可下載Swiper檔案或使用CDN。
... ...
2.HTML內容。
导航等组件可以放在container之外
3.你可能想要為Swiper定義一個大小,當然不要也行。
.swiper-container { width: 600px; height: 300px; }
4.初始化Swiper:最好是挨標籤
如果不能寫在HTML內容的後面,則需要在頁面載入完成後再初始化(不推薦)。
或這樣(Jquery和Zepto)
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是Swiper 4.x 在行動端中根據內容觸摸滑動功能的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!