移動端觸摸滑動插件Swiper
04/02/2015一、瞭解Swiper
目前移動端項目一般都需要具有觸屏焦點圖的效果，如果你也需要實現這一功能的話，Swiper是一個不錯的選擇。
1、他不需要加載任何公共庫（如jQuery）即可運行，這保證了Swiper的輕量和運行速度。Swiper也可以在加載了公共庫的環境下安全的動行，如jQuery，Zepto，jQuery Moblie等。
2、Swiper默認的觸摸比例爲1:1，你可以通過修改Swiper的設置來改變這個比例。
3、Swiper 增加了選項可以開啓 Mutation Observer,有了這個功能Swiper可以在你動態改變Dom或Swiper的樣式時自動重新初始化並計算所需的元素。
4、Swiper擁有豐富的API，他允許你建立自己獨特的分頁器、導航、視差滾動、或其他精彩的效果。
5、Swiper是唯一一個支持100%RTL佈局的滑動插件。
6、Swiper允許多行Slides佈局，這樣每行的slide就會較少。
7、增加了三種新的過渡效果：淡入、3D方塊、3D流。
8、現在Swiper可以用來控制其他的Swiper，甚至可以同時控制。
9、Swiper帶有所有常用的導航控制器，包括分頁器，切換箭頭，滾動條。
10、Swiper使用流行的flexbox佈局，這樣就解決了很多計算尺寸方面的問題。這種佈局也允許用CSS來設定Slides。
11、你可以在Swiper初始化的時候設定slide的顯示，包括每行、每列、每組數量以及他們的間距等。
12、Swiper支持流行的視差滾動效果，這種效果可以應用在Swiper裏任一元素上，圖片、文本塊、標題、背景等等。
13、Swiper懶加載延遲了不活動/不可見的圖片加載，用戶滑動時才加載他們。這一特性可以使頁面加載更快並可提高Swiper的性能。
14、Swiper3還包含了所有swiper2的牛逼功能，包括自適應、滾動反彈、抵抗反彈、loop模式、嵌套Swiper。
二、使用方法
1.首先加載插件，Swiper準備了基礎測試包供你使用，測試包裏面已經包含了swiper.min.js和swiper.min.css文件。
<!DOCTYPE html><html><head>
…
<link rel=”stylesheet” href=”path/to/swiper.min.css”></head><body>
…
<script src=”path/to/swiper.min.js”></script></body></html>
如果你的頁面加載了jQuery.js或者zepto.js，你可以選擇使用更輕便的swiper.jquery.min.js。
<!DOCTYPE html><html><head>
…
<link rel=”stylesheet” href=”path/to/swiper.min.css”></head><body>
…
<script src=”path/to/jquery.js”></script>
<script src=”path/to/swiper.jquery.min.js”></script></body></html>
2.HTML內容。
<div class=”swiper-container”>
<div class=”swiper-wrapper”>
<div class=”swiper-slide”>Slide 1</div>
<div class=”swiper-slide”>Slide 2</div>
<div class=”swiper-slide”>Slide 3</div>
</div>
<!– 如果需要分頁器 –>
<div class=”swiper-pagination”></div>
<!– 如果需要導航按鈕 –>
<div class=”swiper-button-prev”></div>
<div class=”swiper-button-next”></div>
<!– 如果需要滾動條 –>
<div class=”swiper-scrollbar”></div></div>
3.你可能想要給Swiper定義一個大小。
.swiper-container {
width: 600px;
height: 300px;}
4.初始化Swiper：最好是挨着</body>標籤
<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內容的後面，則需要在頁面加載完成後再初始化。
<script type=”text/javascript”>
window.onload = function() {
…
}
</script>
或者這樣（Jquery和Zepto）
<script type=”text/javascript”>
$(document).ready(function () {
…
})
</script>
三、API
| Parameter | Type | Default | Description |
|---|---|---|---|
| initialSlide | number | 0 | 初始slide的索引 |
| direction | string | ‘horizontal’ | 可以是’horizontal’或’vertical’(垂直滑動) |
| speed | number | 300 | 滑動速度(單位ms) |
| setWrapperSize | boolean | false | 開啓這個設定會在Wrapper上添加等於slides相加的寬高，在對flexbox佈局的支持不是很好的瀏覽器中可能需要用到。 |
| virtualTranslate | boolean | false |
虛擬位移。當你啓用這個參數，Swiper除了不會移動外其他的都像平時一樣運行，僅僅是不會在Wrapper上設置位移。當你想自定義一些slide切換效果時可以用。 比如我們提供的cube切換效果，當slide切換時，Wrapper的位置是固定的。 |
| Autoplay(自動切換) | |||
| autoplay | number | - | 自動切換的時間間隔（單位ms），不設定該參數slide不會自動切換。 |
| autoplayDisableOnInteraction | boolean | true | 如果設置爲false，用戶操作swiper之後自動切換不會停止，每次都會重新啓動autoplay。 |
| Progress(進度) | |||
| watchSlidesProgress | boolean | false | 開啓這個參數來計算每個slide的progress(進展) |
| watchSlidesVisibility | boolean | false | 必須先開啓watchSlidesProgress 開啓了watchSlidesVisibility，則會在每個可見slide增加一個classname |
| Freemode(free模式) | |||
| freeMode | boolean | false | 設置爲true時，將開啓free模式，即滑動停止後停在當前位置，而不是當前幀的位置。 |
| freeModeMomentum | boolean | true | 設置爲true時，滑動釋放slide後仍會靠動量繼續滑動，爲false時，釋放後立即停止。 |
| freeModeMomentumRatio | number | 1 | 設置的值越大，當釋放slide時的滑動距離越大。 |
| freeModeMomentumBounce | boolean | true | false時禁用free模式下的動量反彈，slides通過慣性滑動到邊緣時，無法反彈。 |
| freeModeMomentumBounceRatio | number | 1 | 值越大產生的邊界反彈效果越明顯，反彈距離越大。 |
| Effects(切換效果) | |||
| effect | string | ‘slide’ | 可設置爲”slide”（位移切換）”fade”（淡入）”cube”（方塊）”coverflow”（3d流）。 |
| fade | object |
fade: { crossFade: false} |
fade效果參數 |
| cube | object |
cube: { slideShadows: true, shadow: true, shadowOffset: 20, shadowScale: 0.94} |
cube效果參數 |
| coverflow | object |
coverflow: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows : true} |
coverflow效果參數 |
| Parallax(視差效果) | |||
| parallax | boolean | false | 開啓視差效果 |
| Slides grid(網格分佈) | |||
| spaceBetween | number | 0 | slide之間的距離（單位px） |
| slidesPerView | number or ‘auto’ | 1 | 設置slider容器能夠同時顯示的slides數量(carousel模式)。 |
| slidesPerColumn | number | 1 | 多行佈局裏面每列的slide數量。 |
| slidesPerColumnFill | string | ‘column’ | 多行佈局中以什麼形式填充’cloumn’和’row’ |
| slidesPerGroup | number | 1 | 在carousel mode下定義slides的數量多少爲一組。 |
| centeredSlides | boolean | false | 設定爲true時，活動塊會居中，而不是默認狀態下的居左。 |
| Grab Cursor(抓手光標) | |||
| grabCursor | boolean | false | 設置爲true時，鼠標覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀 |
| Touches(觸發) | |||
| touchRatio | number | 1 | 觸摸距離與slide滑動距離的比率。 |
| touchAngle | number | 45 | 允許觸發拖動的角度值 |
| simulateTouch | boolean | true | 默認爲true，Swiper接受鼠標點擊、拖動 |
| shortSwipes | boolean | true | 設置爲false時，進行快速短距離的拖動無法觸發Swiper。 |
| longSwipes | boolean | true | 設置爲false時，進行長時間長距離的拖動無法觸發Swiper。 |
| longSwipesRatio | number | 0.5 | 進行longSwipes時觸發swiper所需要的最小拖動距離比例，值越大觸發Swiper所需距離越大。最大值0.5。 |
| longSwipesMs | number | 300 | 定義longSwipes的時間（單位ms），超過則屬於longSwipes。 |
| followFinger | boolean | true | 如設置爲false，拖動slide時它不會動，當你釋放時slide纔會切換。 |
| onlyExternal | boolean | false | 值爲true時，slide無法拖動，只能使用擴展API函數來改變slides滑動。 |
| threshold | number | 0 | 拖動的臨界值（單位爲px），如果觸摸距離小於該值滑塊不會被拖動。 |
| touchMoveStopPropagation | boolean | true | true時阻止touchmove冒泡事件。 |
| Touch Resistance(觸摸阻力) | |||
| resistance | boolean | true | 值爲false時將slide拖出邊緣時完全沒有抗力 |
| resistanceRatio | number | 0.85 | 抵抗率。resistant bounds（抵抗反彈）抵抗力的大小比例。值越小抵抗越大越難將slide拖出邊緣。 |
| Clicks(點擊) | |||
| preventClicks | boolean | true | 默認爲true，當swiping時阻止意外的鏈接點擊。 |
| preventClicksPropagation | boolean | true | 阻止click冒泡。拖動Swiper時阻止click事件。 |
| slideToClickedSlide | boolean | false | 設置爲true則swiping時點擊slide會過渡到這個slide。 |
| Swiping / No swiping(禁止) | |||
| allowSwipeToPrev | boolean | true | 設爲false可禁止向左或上滑動。 |
| allowSwipeToNext | boolean | true | 設置爲false可禁止向右或下滑動。 |
| noSwiping | boolean | true | 設爲true時，可以在slide上增加類名’swiper-no-swiping’，使該slide無法滑動。 |
| noSwipingClass | string | ‘swiper-no-swiping’ | 不可拖動塊的類名，當noSwiping設置爲true時，並且在slide加上此類名，slide無法拖動。 |
| swipeHandler | string / HTMLElement | null | CSS選擇器或者HTML元素。你只能拖動它進行swiping。 |
| Pagination(分頁器) | |||
| pagination | string / HTMLElement | null | 分頁器容器的css選擇器或HTML標籤。 |
| paginationHide | boolean | true | true時點擊Swiper的container會顯示/隱藏分頁器。 |
| paginationClickable | boolean | false | 值爲true時，點擊分頁器的指示點時會發生Swiper。 |
| paginationBulletRender(index, className) | function | null | 渲染分頁器小點。這個參數允許完全自定義分頁器的指示點。 |
| Navigation Buttons(前進後退按鈕) | |||
| nextButton | string / HTMLElement | null | 前進按鈕的css選擇器或HTML元素。 |
| prevButton | string / HTMLElement | null | 後退按鈕的css選擇器或HTML元素。 |
| Scollbar(滾動條) | |||
| scrollbar | string / HTMLElement | null | Scrollbar容器的css選擇器或HTML元素。 |
| scrollbarHide | boolean | true | 滾動條是否自動隱藏。默認：true會自動隱藏。 |
| Keyboard / Mousewheel(鍵盤、鼠標控制選項) | |||
| keyboardControl | boolean | false |
是否開啓鍵盤控制Swiper切換。 設置爲true時，能使用鍵盤方向鍵控制slide滑動。 |
| mousewheelControl | boolean | false |
是否開啓鼠標控制Swiper切換。 設置爲true時，能使用鼠標滑輪控制slide滑動。 |
| mousewheelForceToAxis | boolean | false |
當值爲true讓鼠標滑輪固定於軸向。當水平mode時的鼠標滑輪只有水平滾動纔會起效，當垂直mode時的鼠標滑輪只有垂直滾動纔會起效。 普通家用鼠標只有垂直方向的滾動。 |
| Hash Navigation(散列導航) | |||
| hashnav | boolean | false | 如需使用散列導航（有點像錨鏈接）將此參數設置爲true。 |
| Images(圖片選項) | |||
| preloadImages | boolean | true | 默認爲true，Swiper會強制加載所有圖片。 |
| updateOnImagesReady | boolean | true | 當所有的內嵌圖像（img標籤）加載完成後Swiper會重新初始化。 |
| lazyLoading | boolean | false | 設爲true開啓圖片延遲加載，使preloadImages無效。 |
| lazyLoadingInPrevNext | boolean | true | 設置爲true允許將延遲加載應用到最接近的slide的圖片（前一個和後一個slide）。 |
| lazyLoadingOnTransitionStart | boolean | true | 默認當過渡到slide後開始加載圖片，如果你想在過渡一開始就加載，設置爲true |
| Loop(環路) | |||
| loop | boolean | false | 設置爲true 則開啓loop模式。loop模式：會在wrapper前後生成若干個slides讓slides看起來是銜接的，用於無限循環切換。 |
| loopAdditionalSlides | number | 0 | loop模式下會在slides前後複製若干個slide,，前後複製的個數不會大於原總個數。 |
| loopedSlides | number | null | 在loop模式下使用slidesPerview:’auto’,還需使用該參數設置所要用到的loop個數。 |
| Controller(雙向控制) | |||
| control | [Swiper Instance] | undefined | 設置爲另外一個Swiper實例開始控制該Swiper。 |
| controlInverse | boolean | false | 設置爲true時控制方向倒轉。 |
| Callbacks(回調函數) | |||
| runCallbacksOnInit | boolean | true | 初始化時觸發 [Transition/SlideChange] [Start/End] 回調函數。這些回調函數會在下次初始化時被清除如果initialSlide不爲0。 |
| onInit(swiper) | function | 回調函數，初始化後執行。 | |
| onSlideChangeStart(swiper) | function | 回調函數，滑塊釋放時如果觸發slider切換則執行。free模式下無效。 | |
| onSlideChangeEnd(swiper) | function | 回調函數，slider切換結束時執行。free模式下無效。 | |
| onTransitionStart(swiper) | function | 回調函數，過渡開始時觸發，接收Swiper實例作爲參數。 | |
| onTransitionEnd(swiper) | function | 回調函數，過渡結束時觸發，接收Swiper實例作爲參數 | |
| onTouchStart(swiper, event) | function | 回調函數，當碰觸到slider時執行。可選Swiper和touchstart事件作爲參數。 | |
| onTouchMove(swiper, event) | function | 回調函數，手指觸碰Swiper並滑動（手指）時執行。此時slide不一定會發生移動 | |
| onTouchMoveOpposite(swiper, event) | function | 回調函數，當手指觸碰Swiper並且沒有按照direction設定的方向移動時執行。可選Swiper實例和touchmove事件作爲參數。 | |
| onSliderMove(swiper, event) | function | 回調函數，手指觸碰Swiper並拖動slide時執行。 | |
| onTouchEnd(swiper, event) | function | 回調函數，當釋放slider時執行。 | |
| onClick(swiper, event) | function | 回調函數，當你點擊或輕觸Swiper 300ms後執行。 | |
| onTap(swiper, event) | function | 回調函數，當你輕觸(tap)Swiper後執行。在移動端，click會有 200~300 ms延遲，所以請用tap代替click作爲點擊事件。 | |
| onDoubleTap(swiper, event) | function | 回調函數，當你兩次輕觸Swiper 時執行，類似於雙擊。 | |
| onImagesReady(swiper) | function | 回調函數，所有內置圖像加載完成後執行，同時“updateOmImagesReady”需設置爲“true’。 | |
| onProgress(swiper, progress) | function | 回調函數，當Swiper的progress被改變時執行。 | |
| onReachBeginning(swiper) | function | 回調函數，Swiper切換到初始化位置時執行。 | |
| onReachEnd(swiper) | function | 回調函數，當Swiper切換到最後一個Slide時執行。 | |
| onDestroy(swiper) | function | 回調函數，銷燬Swiper時執行。 | |
| onSetTranslate(swiper, translate) | function | 回調函數，每次當Swiper開始過渡動畫時持續執行。transtion獲取到的是Swiper的speed值。 | |
| onSetTransition(swiper, transition) | function | 回調函數，wrapper改變其位置時執行。返回當前transform 的偏移量的對象。 | |
| onAutoplayStart(swiper) | function | 回調函數，自動切換開始時執行。 | |
| onAutoplayStop(swiper) | function | 回調函數，自動切換結束時執行。 | |
| onLazyImageLoad(swiper,slide, image) | function | 回調函數，圖片延遲加載開始時執行。 | |
| onLazyImageReady(swiper, slide, image) | function | 回調函數，圖片延遲加載結束時執行。 | |
| Namespace(命名空間) | |||
| slideClass | string | ‘swiper-slide’ | 設置slide的類名。 |
| slideActiveClass | string | ‘swiper-slide-active’ | 設置活動塊的類名。 |
| slideVisibleClass | string | ‘swiper-slide-visible’ | 設置可視塊的類名。 |
| slideDuplicateClass | string | ‘swiper-slide-duplicate’ | loop模式下被複制的slide的類名。 |
| slideNextClass | string | ‘swiper-slide-next’ | active slide的下一個slide的類名。 |
| slidePrevClass | string | ‘swiper-slide-prev’ | active slide的前一個slide的類名。 |
| wrapperClass | string | ‘swiper-wrapper’ | 設置wrapper的css類名。 |
| bulletClass | string | ‘swiper-pagination-bullet’ | pagination分頁器內元素的類名。 |
| bulletActiveClass | string | ‘swiper-pagination-bullet-active’ | pagination分頁器內活動(active)元素的類名。 |
| paginationHiddenClass | string | ‘swiper-pagination-hidden’ | 分頁器隱藏時的類名。 |
| buttonDisabledClass | string | ‘swiper-button-disabled’ | 前進後退按鈕不可用時的類名。 |
Swiper常用方法
1、mySwiper.destroy()
銷燬Swiper(true)。銷燬所有綁定的監聽事件，移除鼠標鍵盤事件，釋放瀏覽器內存。
2、mySwiper.startAutoplay()
開始自動切換。一般用來做“Play”按鈕。
3、mySwiper.stopAutoplay()
停止自動切換。一般用來製作“pause”按鈕。
4、mySwiper.slideNext(runCallbacks, speed)
滑動到下一個滑塊。
5、mySwiper.slidePrev(runCallbacks, speed)
滑動到前一個滑塊。
6、mySwiper.slideTo(index, speed, runCallbacks)
滑動到到指定滑塊。
index:必選，num，指定將要切換到的slide的索引，第一個爲0
speed:可選，num(單位ms)，切換速度
runCallbacks:可選，boolean，設置爲false時不會觸發onSlideChange回調函數。
附：
Swiper官網：http://www.idangero.us/sliders/swiper/index.php
Swiper中文網：http://www.swiper.com.cn/