1.首先載入外掛程式，需要用到的檔案有swiper.min.js和swiper.min.css檔案。
...
如果你的頁面載入了jquery.js或者zepto.js，你可以選擇使用更輕便的swiper.jquery.min.js。
...
2.html內容。
slide 2
slide 3
導航等元件可以放在container之外
3.你可能想要給swiper定義乙個大小，當然不要也行。
.swiper-container4.初始化swiper：最好是挨著標籤
如果不能寫在html內容的後面，則需要在頁面載入完成後再初始化。
或者這樣（jquery和zepto）
5.完成。恭喜你，現在你的swiper應該已經能正常切換了，如果沒有，你可以參考下這個測試包。現在開始新增各種選項和引數豐富你的swiper，開啟華麗移動前端創作之旅。
常用屬性：
1.initialslide:2， // 當前索引值為第2張 ，從0計數
設定初始化時slide的索引。
2.direction : vertical ， //滑動方向為垂直
slides的滑動方向，可設定水平(horizontal)或垂直(vertical)。
3.autoplaydisableoninteraction : false,
使用者操作swiper之後，是否禁止[autoplay]，預設為true：停止。如果設定為false，使用者操作swiper之後自動切換不會停止，每次都會重新啟動autoplay。
4.autoplaystoponlast：true,
如果設定為true，當切換到最後乙個slide時停止自動切換。（loop模式下無效）
5.grabcursor : true,
設定為true時，滑鼠覆蓋swiper時指標會變成手掌形狀，拖動時指標會變成抓手形狀。（根據瀏覽器形狀有所不同）
6.effect:預設為"slide"（位移切換），可設定為"fade"（淡入）"cube"（方塊）"coverflow"（3d流）"flip"（3d翻轉）
swiper移動端無法滑動問題
找到原因後，只須對症下藥。在查閱swiper的api時發現，有這樣兩個引數 observer和observeparents，前者啟動動態檢查器，當改變swiper的樣式 例如隱藏 顯示 或者修改swiper的子元素時，自動初始化swiper。後者原理和前者一樣，只是將observe應用於swiper...
移動端使用Swiper實現左右滑動切換內容
效果圖如下 示例 如下 doctype html utf 8 viewport content width device width,initial scale 1,minimum scale 1,maximum scale 1,user scalable no 內容左右滑動切換 title sty...
移動端觸控劃屏，實現內容滑動
swipe.js是乙個比較有名的觸控滑動外掛程式，它能夠處理內容滑動，支援自定義選項，你可以讓它自動滾動，控制滾動間隔，返回 函式等。經常可見使用在移動前端開發中。下面是乙個比較簡單的使用例子，新增適當的html 和js 即可。window.myswipe swipe document.getele...