Swiper 4.x 在行動端中根據內容觸摸滑動功能的實現

這次帶給大家Swiper 4.x 在行動端中根據內容觸摸滑動功能的實現，Swiper 4.x 在行動端根據內容觸摸滑動實現的注意事項有哪些，下面就是實戰案例，一起來看一下。

Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等行動終端。

Swiper能實現觸控螢幕焦點圖、觸控螢幕Tab切換、觸控螢幕多圖切換等常用效果。

Swiper開源、免費、穩定、使用簡單、功能強大，是架構行動終端網站的重要選擇！

1.先載入插件，需要用到的檔案有swiper.min.js和swiper.min.css檔案。可下載Swiper檔案或使用CDN。

   ...  
  ...   

2.HTML內容。

 
 
Slide 1
 
Slide 2
 
Slide 3
 
  
  
 
  
 
 导航等组件可以放在container之外

3.你可能想要為Swiper定義一個大小，當然不要也行。

.swiper-container { width: 600px; height: 300px; }

4.初始化Swiper：最好是挨標籤

如果不能寫在HTML內容的後面，則需要在頁面載入完成後再初始化（不推薦）。

或這樣（Jquery和Zepto）

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

應該如何建立webpack react開發環境

如何建立React全家桶環境

以上是Swiper 4.x 在行動端中根據內容觸摸滑動功能的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！