一：為什麼選擇swiper？

免費，開源，穩定，應用廣泛。
可單獨使用無需jquery，也可以結合jquery一起使用。
簡單配置即可實現手機，平板網站的大部分觸控功能。
包括焦點圖，tab，觸控滑動導航等。

swiper是純javascript打造的滑動特效外掛，面向手機，平板電腦等移動終端。它能實現觸屏焦點圖，觸屏tab切換，觸屏多圖切換等常用效果。主要使用於移動端的網站，移動web apps，native apps 和hybrid apps 。主要是為ios而設計的，同時，在安卓，wp8系統也有良好的使用者體驗，swiper3.0開始將不再全面支援PC端。因此，如果需要在PC上相容更多的瀏覽器，可以選擇swiper2.x（甚至支援ie7).

二:swiper使用方法（以下出自swiper官網）

1：首先載入外掛：需要使用的檔案有swiper.mim.js和swiper.mim.css檔案。 [html] view plain copy print ?

<!DOCTYPE html>
<html>
<head>
...
<linkrel="stylesheet"href="path/to/swiper.min.css">
</head>
<body>
...
<scriptsrc="path/to/swiper.min.js"

></script>
</body>
</html>

如果你的頁面載入了jquery.jd或者zepto.js，你可以選擇使用更輕便的swiper.jquery.mim.js [html] view plain copy print ?

<!DOCTYPE html>
<html>
<head>
...
<linkrel="stylesheet"href="path/to/swiper.min.css">
</head

>
<body>
...
<scriptsrc="path/to/jquery.js"></script>
<scriptsrc="path/to/swiper.jquery.min.js"></script>
</body>
</html>

2：html內容 [html] view plain copy print ?

<divclass="swiper-container">
<divclass="swiper-wrapper">
<divclass="swiper-slide">Slide 1</div>
<divclass="swiper-slide">Slide 2</div>
<divclass="swiper-slide">Slide 3</div>
</div>
<divclass="swiper-pagination"></div>
<divclass="swiper-button-prev"></div>
<divclass="swiper-button-next"></div>
<divclass="swiper-scrollbar"></div>
</div>
導航等元件可以放在container之外

3：初始化swiper，最好是緊靠</body>標籤。

[html] view plain copy print ?

<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分頁器
pagination: '.swiper-pagination',
// 如果需要前進後退按鈕
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滾動條
scrollbar: '.swiper-scrollbar',
})
</script>
</body>

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

[html] view plain copy print ?

<scripttype="text/javascript">
window.onload = function() {
...
}
</script>

或者這樣（已經載入jquery和zepeto） [html] view plain copy print ?

<scripttype="text/javascript">
$(document).ready(function () {
...
})
</

相關推薦

開源，免費的移動端觸控滑動外掛------swiper介紹----淘搶購時間選擇載入產品

一：為什麼選擇swiper？免費，開源，穩定，應用廣泛。可單獨使用無需jquery，也可以結合jquery一起使用。簡單配置即可實現手機，平板網站的大部分觸控功能。包括焦點圖，tab，觸控滑動導航等。 swiper是純javascript打造的滑動

移動端觸控上拉隱藏指定模組內容，有過度效果（同時頁面iscroll滾動）

應用場景：觸碰螢幕進行上拉隱藏指定模組內容，有過度效果；在滾動到第一條內容的時候，才可以進行下拉重新出現該模組內容。 style樣式： *{ margin: 0; padding: 0; font-family: "微軟雅黑"; } html,body{ width: 100%; height: 100%

移動端上下滑動swiper,第二個頁面內容大於螢幕尺寸，現在的問題是，超出部分無法通過滾動條下滑檢視。

（如果禁用swiper某個方向的移動，會導致無法滑動到上一頁） <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport"

使用原生JS封裝Tap事件，解決移動端300ms延遲

itl dia can 開發閉包 tcl type 移動端 com 為了防止誤操作，移動端iOS操作系統針對原生click事件做了300ms的延遲，這在一定程度上影響了我們的使用體驗。 GitHub項目地址：https://github.com/Simon

jquery touch 移動端上下滑動加載

hang blog change ldl scrollto jquery scroll edt end var touchStart, touchEnd, touchDiff = 80; $(window).on({ ‘touchs

教你小三角，適用移動端等，解決移動端a標簽的默認樣式

utf-8 劃線 hover -s html 出現 class span charset 1.小三角，通過給一個div設置足夠大的邊框，讓它的上邊框，右邊框，左邊框，的背景顏色設置成透明的，來實現，如下： <!DOCTYPE html> <html>

熊掌號，為移動端而生

就是 bsp margin 最重要的 .com 內容 spl ima 原創 11初，百度正式推出"熊掌號"，是一個"搜索 + 信息流"雙引擎與"百家號 + 熊掌號"雙品牌內容平臺，而它的出現，對於站長來說，最重要的就是為了移動端（H5）原創內容的保護。

移動端彈性滑動以及vue記錄滑動位置

我們移除顯示 lis 滑動手指 oca 方式 -i -webkit-overflow-scrolling介紹 -webkit-overflow-scrolling: auto | touch; auto：普通滾動，當手指從觸摸屏上移開，滾動立即停止 touch：滾動

移動端tab滑動和上下拉刷新加載

ldo swiper 手勢 lock red height direction 不清楚 log 移動端tab滑動和上下拉刷新加載查看demo（請在移動端模式下查看）查看代碼開發該插件的初衷是，在做一個項目時發現現在實現移動端tab滑動的插件大多基於swiper，sw

js移動端左右滑動事件

edt efault nbsp ret rip chm width idt touchend 1 <div id="box" style="width:100%;height:100%;border:1px solid red;"></div>

vue中實現圖片全屏縮放預覽，支援移動端

# 安裝 npm install vue-photo-preview --save # 引入 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(pr

基於canvas的移動端手寫外掛

mobile-graphics 基於canvas的移動端手寫外掛 github地址：https://github.com/fisher-zh/graphics[https://github.com/fisher-zh/graphics] 安裝模組化安裝 npm in

用css巧妙實現移動端橫向滑動展示功能

公司需要做一個手機橫向滑動的效果，不想用js外掛，太麻煩，匯入程式碼也多。所以去網上找了一下，用css就能實現，挺方便的。主要利用了display:-webkit-box來實現。 <!DOCTYPE html> <html> <head> <ti

webstrom中模組檔案，針對移動端計算是750之類的方式

針對移動端計算是750之類的方式，如下 function rootREM(num) { var W = document.documentElement.clientWidth; W = (W <= num) ? W : num;

原生JavaScript實現監聽移動端上下左右滑動事件

/** * @author W.Dong * @date 2018/10/26 * @Description: 監聽觸控的方向 */ var EventUtil = { addHandler: function (element, type, handler) { if

移動端觸控移動相互調換位置

應用場景：在移動端觸控移動指定容器，與另外一個容器相互調換位置。效果如圖： css程式碼： *{ margin: 0; padding: 0; font-family: "微軟雅黑";}html,body{ width: 100%; height: 100%; positio

vue實現移動端圓形旋鈕外掛

最近公司有一個專案的需要做出旋鈕的效果，旋鈕有十個檔，根據手指旋轉切換，旋轉時接近最近的檔會有吸附效果，具體效果如下： html部分程式碼： <div class="_touch"> <div class="round_box" ref="box" @touchstart

只能輸入數值封裝，input或者contentable==true的div，解決網上其他方法的bug，相容移動端。

/** * 限制只能輸入number * @param {[type]} dom [限制的dom類名] */ function checkNumer(dom) { if (typeof $ == 'function') { let inp = $

移動端頁面滑動時候警告：Unable to preventDefault inside passive event listener due to target being treated as passive.

ted doc com cti 滾動 href 解決 docs css 移動端項目中，在滾動的時候，會報出以下提示： [Intervention] Unable to preventDefault inside passive event listener due to t

Vant 1.4.8 釋出，輕量級移動端 Vue 元件庫

Vant 1.4.8 已釋出，更新內容如下： Improvements Sku: 新增 hide-quota-text 屬性 #2216 ImagePreview: 新增 asyncClose 屬性 #2198 ImagePreview: 新增

開源，免費的移動端觸控滑動外掛------swiper介紹----淘搶購時間選擇載入產品

一 ：為什麼選擇swiper？

二:swiper使用方法（以下出自swiper官網）

相關推薦

一：為什麼選擇swiper？