Swiper說明&&API手冊【中文手冊Swiper】

時間 2019-11-06

標籤 swiper 說明 api 手冊中文手冊Swiper 简体版

原文原文鏈接

原文地址：http://www.cnblogs.com/scavengers/p/3760449.htmljavascript

示例：php

<link rel="stylesheet" href="css/swiper.css" type="text/css" media="screen" />

<script src="js/swiper.js"></script>

  <div class="swiper-container">  　　<div class="swiper-wrapper">  　　<div class="swiper-slide"> </div>   　　<div class="swiper-slide"> </div>   　　<div class="swiper-slide"> </div>  　　 </div>
　　 <div class="pagination"></div>  </div>

<script>

var widths=document.getElementById("SwipeTarget").clientWidth;
	var heights=widths*1.58;
  $("#SwipeTarget").height(function(){ return heights+"px";});
  $(".swiper-container").width(function(){ return widths+"px";});  
  $(".swiper-container").height(function(){ return heights+"px";});

   var mySwiper =new Swiper('.swiper-container',{
	 pagination: '.pagination',
        loop:false,
	autoplay:3500,
	autoplayDisableOnInteraction:true,
	autoplayStopOnLast:true,
        grabCursor: true,
        paginationClickable: true,
	onSlideChangeStart: function(){

	 	 setTimeout(function(){
				 $(".jx-words").eq(mySwiper.activeIndex).animate({top:"8%",opacity:1},800);  
		 },200);

		$(".jx-words").animate({top:"15%",opacity:0},0);
	 }
  });

</script>

最近使用Swipe.js，發現中文的資料不多，試着翻譯了一下。能力有限，翻譯不免錯漏，歡迎指出，多謝！css

翻譯自：http://www.idangero.us/sliders/swiper/api.phphtml

http://www.idangero.us/sliders/swiper/index.phpjava

一瞭解Swiper
Swiper 是一款免費以及輕量級的移動設備觸控滑塊的框架，使用硬件加速過渡（若是該設備支持的話）。主要使用與移動端的網站、網頁應用程序（web apps），以及原生的應用程序（native apps）。主要是爲IOS而設計的，同時，在Android、WP8系統以及現代桌面瀏覽器也有着良好的用戶體驗。jquery

特徵（feature)
一、1：1觸控運動
Swiper默認提供1:1的觸控距離，固然，這個比率是能夠設置的。（touchRatio）
二、觸控模仿
這個功能對於開發桌面網站會頗有用。簡單來講，就是由於Swiper可以讓鼠標事件表現得像觸屏事件（點擊以及拖曳滑塊）
三、水平/垂直
Swiper運動主要有兩種模式，horizontal(水平滑動)以及vertical（垂直運動的滑動）
四、自由模式（Free Mode）
這種模式下可以讓slides 無需定位，就像一般的滑動條。（看下面的例子）
五、旋轉調整（rotation/resize）
Swiper 在移動設備旋轉後能自適應尺寸。
六、響應式
能使用百分比的寬高定義slides,爲移動端提供不一樣的解決方案。
七、滑動阻止
簡單來講，就是，只能使用一種模式，水平或者垂直滑動。
八、抵抗反彈（resistant bounds）
Swiper可以提供一種機制，就是當滑動滑塊超過最左以及最右（最上或最下）的位置時觸發的一種抵禦機制。
九、原生要素（native momentum）
有很多的原生東西提供給Swiper。
十、內建分頁控制
Swiper可以快速生成內建的分頁控制（pagination）,指定html 某一標籤爲pagination，Swiper就能作不少東西了。
十一、自動播放
只用設置延遲時間，Swiper就會自動地輪播slides直到你觸碰該滑塊（touch）爲止。
十二、循環模式（Loop mode）
該種模式下，你可以無限滑動滑塊，到最後一個以後會跳轉回第一個。
1三、旋轉模式（Carousel mode）
Swiper 可以讓你在slides父容器下設置你所須要展現的slides數量。
1四、滑動容器
在該特徵下可以使用Swiper在一些簡單的能滑動的區域裏，沒有slides。在Apps裏十分有用。
1五、嵌套Swipers
可以將Swipers嵌套入各類不一樣的Swiper 的slide裏，例如垂直的或水平的。
1六、任意的HTML 標籤
能夠將任一的HTML 內容放到slide裏，不止僅限於圖像。
1七、硬件加速
swiper 使用硬件加速技術（若是該移動設備支持的話）可以獲得良好流暢的動畫效果以及優美的外觀，尤爲是在IOS設備裏。
1八、豐富的API
Swiper擁有豐富的API接口。（不過關於中文文檔彷佛很少，沒找着。）可以讓開發者生成我的獨有的分頁器（pagination），上下滑塊的按鈕以及4個回調函數：onTouchStart,onTouchMove,onTouchEnd,onSlideSwitch。
1九、靈活的配置
Swiper在初始化的時候可以接受多個參數以便讓其儘量的靈活。可以配置動畫的速度（speed），模式（mode水平抑或垂直的），以及自由模式（free mode）...以及其餘..
20、插件API（Plugins API）
Swiper從1.7版本開始就變得強大起來了，由於有更多而簡單的插件API容許開發者創造屬於本身的Swiper 插件或經過Swiper的核心創制hooks(掛鉤)（該官網處提供了幾款優秀的插件Swiper smooth progress, Swiper hash navigation,swiper scrollbar）
2一、良好的兼容性
Swiper通用性的測試環境：移動端的Safari（iOS5下），Android 2.1+，windows Phone 8,以及最新版本的谷歌瀏覽器（Chrome），Safari，Firefox，IE10 以及歐朋瀏覽器（Opera）
2二、老版本IE的兼容
Swiper 2.x 開始，經過DOM動畫，而非css transitions 兼容IE7 以上（須要包含jQuery），由於IE7不支持css3 transitions....簡單來講，支持IE7 以上版本。
2三、獨立性
Swiper不依賴像jQuery那樣的js類庫，所以可以讓Swiper更加的小型以及快速。因此Swiper可以很安全地應用諸如jQuery、jQuery Mobile，jQTouch等等其餘的js類庫。
2四、超輕量級
壓縮後僅僅10KB左右。
以上，就是Swiper可以作的，應用以上特徵就使用原生屬性方法可以快速生成使人驚歎的觸控接口以及apps。css3

Usage: git

一、下載swiper最新版本https://github.com/nolimits4web/Swipergithub

二、在HTML Head中添加Swiper's CSS and JS:web

1 <head> 2  .... 3 <link rel="stylesheet" href="path_to_css/idangerous.swiper.css"> 4 <script defer src="path_to_js/idangerous.swiper-2.x.min.js"> </script> 5  .... 6 </head>

其中引用的文件名如下載的爲準。

三、使用下面的HTML佈局

 1 <div class="swiper-container">  2 <div class="swiper-wrapper">  3 <!--First Slide-->  4 <div class="swiper-slide">  5 <!-- 這裏添加第一個HTML內容 -->  6 </div>  7 <!--Second Slide-->  8 <div class="swiper-slide">  9 <!-- 這裏添加第二個HTML內容 --> 10 </div> 11 <!--Third Slide--> 12 <div class="swiper-slide"> 13 <!-- 這裏添加第三個HTML內容 --> 14 </div> 15 <!--Etc..--> 16 </div> 17 </div>

四、打開下載的文件中的idangerous.swiper.css，設置Swiper's的寬度以及高度（在文件的末尾）

/* 指定swiper 容器尺寸: */

.swiper-container, .swiper-slide { width: 500px; height: 200px; }

五、初始化Swiper 在文檔開始處，（或在窗口加載時）

 1 <script type="text/javascript">
 2 /*======  3 使用文檔添加事件或窗口加載事件  4 例如:  5  window.onload = function() { ...代碼 ...}  6 或者document.addEventListener('DOMContentLoaded', function(){ ...代碼... }, false)  7 =======*/  8 window.onload = function() {  9 var mySwiper = new Swiper('.swiper-container',{ 10 //添加須要的選項: 11 mode:'horizontal', 12 loop: true 13 //等等.. 14  }); 15 } 16 }) 17 </script>

API:

new Swiper（container,options）

container: 字符串要求，Swiper's容器的css選擇器。在上面的HTML代碼中就必須等於「.swiper-container」;

options:-對象，可選擇的。Swiper參數，詳情見下：

用法：

1 var mySwiper = new Swiper(".swiper-container",{ 2 speed:750, 3 mode:"vertical" 4 })

返回擁有衆多有用函數（functions）以及方法(methods)的對象:

·mySwiper.disableMousewheelControl()-滑動中禁掉鼠標滑輪（mousewheel control）控制

·mySwiper.enableMousewheelControl()-可以使用禁掉了的鼠標滑輪

·mySwiper.enableKeyboardControl()-滑動中鍵盤控制可用

·mySwiper.disableKeyboardControl()-禁用滑動中鍵盤控制

·mySwiper.swipeNext()-執行過渡動畫到下一滑塊（slide）(簡單來講就是滑動到下一個頁面)

·mySwiper.swipePrev()-執行過渡動畫到上一滑塊

·mySwiper.swipeTo(index,speed,runCallbacks) - 執行過渡到索引下標數字等於傳入參數「index」的頁面（slide）處，速度爲傳入的參數「speed」。同時可將「runCallbacks」設置爲 false（默認爲「true」），那麼transition（過渡）不會產生onSlideChange回調函數。

·mySwiper.browser.ie10 - 返回「true」若是瀏覽器爲IE10

·mySwiper.browser.is8 -返回「true」若是瀏覽器爲IE8

·mySwiper.support.touch -返回「true」若是瀏覽器支持觸屏

·mySwiper.support.transforms -返回「true」若是瀏覽器支持css3 transforms(變形)

·mySwiper.support.transforms3d -返回「true」若是瀏覽器支持css3 3D transforms(變形)

·mySwiper.support.transitions -返回「true」若是瀏覽器支持css3 transitions(過渡)

·mySwiper.activeSlide() - 返回當前活動塊（slide）（slide 實例，HTML元素）

·mySwiper.clickedSlideIndex - 返回觸控/點擊塊（slide）的索引（數字）。只適用於「onSlideTouch」和「onSlideClick」

回調函數中。

·mySwiper.clickedSlide - 返回觸控/點擊塊（slide）（slide實例，HTML元素）。只適於「onSlideTouch」和「onSlideClick」

回調函數中。

·mySwiper.activeIndex- 返回當前活動塊的索引（number）

·mySwiper.activeLoopIndex- 返回當前活動塊在loop 模式下的索引（number）

·mySwiper.activeLoaderIndex- 返回當前活動塊在loader模式下的索引（number）

·mySwiper.previousIndex- 返回上一個活動塊的索引（number）

·mySwiper.startAutoplay()-開始自動播放。應用於自定義「Play」和「Pause」按鈕

·mySwiper.stopAutoplay()-中止自動播放。應用於自定義「Play」和「Pause」按鈕

·mySwiper.destroy(removeResizeEvent) - 移除全部綁定的事件監聽（窗口的尺寸改變事件【若是removeResizeEvent的值不等於「false」】，容器（wrapper）的觸控事件，以及文檔的鼠標事件），對於添加/移除滑塊，頁面到文檔時很是有用，可以釋放瀏覽器內存。

·mySwiper.resizeFix()-調用這個方法當你改變swiper's 的尺寸而沒有改變窗口大小時。

·mySwiper.reInit()- 從新初始化Swiper。對於動態添加/移除滑塊很是有用。

·mySwiper.width 返回Swiper容器的寬度

·mySwiper.height返回Swiper容器的高度

·mySwiper.isTouched 返回布爾值，當觸控該slide時返回「true」

·mySwiper.positions - 返回包含x,y座標的wrapper對象

·mySwiper.touches - 返回包含觸控信息的對象數組

·mySwiper.params - 獲取對象初始化參數，可以在初始化以後改變/重寫該參數，如：

mySwiper.params.speed = 500;

·mySwiper.getWrapperTranslate(axis)- 返回當前容器「位移（translate）"【css3 transform ->translate】,即x,或y軸的偏移量。」axis「-參數爲字符串」x「或」y「,對應於水平模式及垂直模式。

·mySwiper.setWrapperTranslate(x,y,z) - 手工設置css3 transform's translate 的值。x,y and z -爲數字

·mySwiper.wrapperTransitionEnd(callback,permanent) - 使用該方法當Swiper 」transitionEnd「事件觸發後可以自定義回調函數（在swipeNext,swipePrev,swipeTo 以及swipeReset 函數以後）:

callback-函數（function）。默認狀態下（若是permanent 值爲false）transitions只執行一次

permanent - boolean . 默認狀態下爲false，當設置爲真時該回調函數callback會執行屢次。

選項（options）

Swiper 初始化支持下列中的參數

Parameter（參數）	Type(類型)	Default Value（默認值	Example（例子）	Description（說明）
speed	number	300	600	slides滑塊動畫之間的持續時間（單位ms）
eventTarget	string	'wrapper'	'container'	swipers事件對象，默認狀態下全部的觸控事件只能用於wrapper。如若須要其餘元素包含在container內以及使用swipers,那麼可使用'container'. 2.4.2版本新增
autoplay	number	5000	-	過渡延遲時間（單位ms），參數沒有指定的狀況下，不生效，（補充：當用戶操做後autoplay失效）
autoplayDisableOninteraction	boolean	true	false	當設置爲false時，用戶操做以後（swipes,arrow以及pagination 點擊）autoplay不會被禁掉，用戶操做以後每次都會從新啓動autoplay。
autoplayStopOnLast	boolean	false	true	設置爲false後autoplay在最後一個塊下失效（在沒有設置loop的狀況下）
mode	string	'horizontal'	'vertical'	slides滑動方式，水平或垂直
loop	boolean	false	true	true 爲loop模式生效
loopAdditionalSlides	number	0	2	loop模式下slides數量增長個數
loopedSlides	number	1	2	在loop模式下使用slidesPerview:'auto',還需使用該參數設置所要用到的loop個數
slidesPerView	number or 'auto'	1	4	旋轉模式下，設置slider's容器可以同時顯示的slides數量。另外，支持'auto'值，會根據容器container的寬度調整slides數目。‘auto’不兼容loop模式
slidesPerViewFit	boolean	true	false	僅當已設置了slidesPerView:'auto'，以及當slides的寬度大於容器，該參數生效。默認爲true而後寬度大的slide 過渡時會劃分爲邊緣的兩部分。爲false時，slide transition 會劃分爲比容器container大的多個slides
slidesPerGroup	number	1	2	定義slides的數量多少爲一組，在旋轉模式下有效。（carousel mode）
calculateHeight	boolean	false	true	當值爲true時，Swiper根據slides內容計算容器高度。響應式佈局中或不知道slides高度時十分有用（就像響應式的圖片）
roundLengths	boolean	false	true	值爲true時，Swiper會四捨五入寬度和高度，在響應式的滑塊中包含偏差時十分有用。
cssWidthAndHeight	boolean	false	true	值爲true以及Swiper中的container，wrapper和slides沒有高度
updateFormElements	boolean	true	false	當全部的內嵌圖像（img標籤）加載完成後Swiper會從新初始化。
watchActiveIndex	boolean	false	true	若是啓用觸屏事件期間會從新動態計算活動塊的索引。
visiblilityFullfit	boolean	false	true	若是啓用，僅有「可視」的slides會最後適應容器的大小
autoResize	boolean	true	false	值爲false時，窗口尺寸改變時，禁掉slides自適應
DOManimation	boolean	true	false	在不支持css transitions(IE7-9)的瀏覽器上是否使用自定義的DOM動畫
resistance	boolean or "100%"	true	false	值爲false時禁用resistant bounds（抵抗反彈）,設置爲‘100%'時啓用resistant（抵抗）模式
noSwiping	boolean	false	true	值爲true時，當swiper新增類」noSwipingClass「的滑動塊時，禁掉該元素的滑動。
preventLinks	boolean	true	false	啓用時當碰觸滑塊（slides）時禁止<a>標籤連接
preventLinksPropagation	boolean	false	true	如滑動過程當中須要跟preventLinks一塊兒禁用stopPropagation，設置值爲true
initialSlide	number	2	0	初始塊（頁面）的索引
useCSS3Transforms	boolean	true	false	值爲false時禁用css3 transforms（減小內存，提升性能，同時也下降了美觀）,同時使用wrapper的left/top屬性代替。

自由模式與滑塊容器（Free Mode and Scroll Container)

Parameter（參數）	Type(類型)	Default Value（默認值	Example（例子）	Description（說明
freeMode	boolean	false	true	若爲真slide座標不固定
freeModeFluid	boolean	false	true	若爲真，釋放滑塊以後仍會滑動一小會
scrollContainer	boolean	false	true	設置爲真時，讓Swiper看上去像滑動區（scrollable area）
momentumRatio	number	1	2	設置的值越大，當釋放滑塊時的動量距離越大
momentumBounce	boolean	true	false	false時禁用自由模式下的（free mode）動量彈性
momentumBounceRatio	number	1	2	值越大產生的動量彈性（momentum bounce）效果越明顯

塊（slides）偏移

Parameter（參數）	Type(類型)	Default Value（默認值	Example（例子）	Description（說明
centeredSlides	boolean	false	true	若爲真，那麼活動塊會居中，而非默認狀態下的居左
offsetPxBefore	number	0	100	指定slides與wrapper左邊框的偏移量
offsetPxAfter	number	0	100	指定slides與wrapper右邊框的偏移量
offsetSlidesBefore	number	0	2	滑塊slides與wrapper左邊框的偏移量等於等於指定滑塊slides個數的寬度。這在響應式佈局中而你又不知道slides寬度時，將十分有用。
offsetSlidesAfter	number	0	2	滑塊slides與wrapper右邊框的偏移量等於等於指定滑塊slides個數的寬度。這在響應式佈局中而你又不知道slides寬度時，將十分有用。

觸屏/鼠標事件效應（Touch/mouse interactions ）

Parameter（參數）	Type(類型)	Default Value（默認值	Example（例子）	Description（說明
touchRatio	number	1	0.8	觸屏比率
simulateTouch	boolean	true	false	true,Swiper接受鼠標事件時與觸屏事件類似。（單擊以及拖曳滑塊）
onlyExternal	boolean	false	true	值爲true時，只能使用擴展API函數內的swipeRight 或swiperLeft改變slides滑動，其餘失效。正如例子裏的tabs切換十分有用
followFinger	boolean	true	false	值爲false時，僅當你釋放slide時纔會滑動，當你用手指按住滑塊它不會動。
grabCursor	boolean	false	true	該選項給Swiper用戶提供小小的貼心應用，值爲true時，光標在Swiper上時成手掌狀。
shortSwipes	boolean	true	false	值爲false時，禁用short swipes
longSwipesRatid	number	0.5	0.3	Swiper 中到上/下滑塊的觸發率
moveStartThreshold	number	false	100	滑動的臨界值，臨界值單位爲px，若是觸屏距離小於該值滑塊不會運動。

Navigation

Parameter（參數）	Type(類型)	Default Value（默認值	Example（例子）	Description（說明
keyboardControl	boolean	false	true	值爲true時，水平模式下，能使用鍵盤左右方向鍵滑動，垂直模式下能使用上下方向鍵滑動
mousewheelControl	boolean	false	true	值爲true時，可以使用鼠標滑輪滑動swiper
mousewheelControlForceToAxis	boolean	false	true	值爲真時，鼠標輪滑會改變軸向，因此水平模式下的鼠標滑輪只做用於水平鼠標滑塊，垂直的做用於垂直模式。

Pagination（分頁器）(指示器)

Parameter（參數）	Type(類型)	Default Value（默認值	Example（例子）	Description（說明
pagination	string or HTML Element	-	'.my-pagination'	css選擇器中的分頁。或者HTML元素內的分頁元素
paginaClickable	boolean	false	true	值爲真時，當單擊指示器時會執行過渡動畫到目標slide
paginationAsRange	boolean	true		爲真時，跟可見塊相關的指示器按鈕會新增css類。當使用slidesPerview超過1時會十分有用。
createPagination	boolean	true	false	值爲真時，Swiper會在slider內生成與slides數量相同的SPAN標籤。全部這些生成的span標籤都在pagination容器內。每個 span標籤都有一個」swiper-pagination-switch「類名，活動的span（及當前slide下的）有一個爲」swiper- active-switch’的類名，對於這些使用樣式十分有用。

命名空間namespace

Parameter（參數）	Type(類型)	Default Value（默認值	Example（例子）	Description（說明
wrapperClass	string	'swiper-wrapper'	'my-wrapper'	Swiper內wrapper的css類。具體查看上面的例子
slideClass	string	'swiper-slide'	'my-slide'	Swiper內slide的css類名。具體查看上面的例子
slideActiveClass	string	'swiper-slide-active'	'my-active-slide'	Swiper內活動塊的css類名。。。
slideActiveClass	string	'swiper-slide-visible'	'my-visible-slide'	Swiper內可視塊的css類名。。。
slideElement	string	'div'	'li'	使用單一滑塊的標籤
noSwipingClass	string	'swiper-no-swiping'	'stop-swiping'	html元素使用的類名，當noSwiping參數設置爲true時，用於禁止滑動
paginationElement	string	'span'	'div'	使用惟一指示按鈕的標籤
paginatinElementClass	string	'swiper-pagination-switch'	'my-switch'	使用多個指示按鈕的類名
paginationActiveClass	string	'swiper-active-switch'	'my-active-switch'	當前活動指示按鈕的類名
paginationVisibleClass	string	'swiper-visible-switch'	'my-visible-switch'	可見指示按鈕的類名

回調函數（Callbacks）

Parameter（參數）	Type(類型)	Default Value（默認值	Example（例子）	Description（說明
queueStatCallbacks	boolean	false	true	設置爲true時，‘slideChangeStart’回調函數入隊，因此在快速滑動過程當中回調函數只被調用一次。
queueEndCallbacks	boolean	false	true	設置爲true時，‘slideChangeEnd’回調函數入隊，因此在快速滑動結束後回調函數只被調用一次。
onFirstInit	funciton	-	function(swiper) { //執行代碼 }	回調函數，首次初始化後立刻執行
onInit	function	-	function(swiper){ //執行代碼 }	回調函數，在其餘全部的初始化/再初始化後立刻執行
onSwiperCreated	function	-	function(swiper){ //執行代碼 }	回調函數，當Swiper初始化完成，loop，pagination，等其餘參數或方法生成以後執行
onTouchStart	function	-	function(swiper){ //執行代碼 }	回調函數，當碰觸到slider時立刻執行
onTouchMove	function	-	function(swiper){ //執行代碼 }	回調函數，當碰觸slider到釋放期間執行。
onTouchEnd	function	-	function(swiper){ //執行代碼 }	回調函數，當釋放slider時執行
onSlideReset	function	-	function(swiper){ //執行代碼 }	回調函數，釋放滑塊以後，滑塊將要滑到當前活動的slide時執行。freeMode模式下不生效。
onSlideChangeStart	funciton	-	function(swiper){ //執行代碼 }	回調函數，當動畫開始過渡到另外一slide時執行，即動畫開始時執行。freeMode模式下不生效。
onSlideChangeEnd	function	-	function(swiper){ //執行代碼 }	回調函數，過渡動畫結束後執行，即滑塊活動中止後執行。freeMode模式下不生效。
onSlideNext	function	-	function(swiper){ //執行代碼 }	回調函數，與onSlideChangeStart類似，但該函數只能在滑向下一slide開始時生效
onSlidePrev	funciton	-	function(swiper){ //執行代碼 }	回調函數，與onSlideChangeStart類似，但該函數只能在滑向上一slide開始時生效
onSlideTouch	function	-	function(swiper){ //執行代碼 }	回調函數，當觸碰事件發生後生效。與onToucStart類似，不過該函數會返回.clickedSlide和.clickedSlideIndex的值
onImageReady	function	-	function(swiper){ //執行代碼 }	回調函數，全部內置圖像加載完成後執行，同時「updateOmImagesReady」需設置爲「true’
onMomentumBounce	function	-	function(swiper){ //執行代碼 }	回調函數，執行於動量反彈（momentum bounce）過程當中
onResistanceBefore	funciton	-	function(swiper,p){ //執行代碼 }	回調函數，執行於negative resistance過程當中。p-返回抵抗距離。
onResistanceAfter	funciton	-	function(swiper,p){ //執行代碼 }	回調函數，執行於positive resistance過程當中。p-返回抵抗距離。
onSetWrapperTransition	function	-	function(swiper,duration){ //執行代碼 }	回調函數，每次當Swiper開始動畫時執行
onSetWrapperTransform	funciton	-	function(swiper,transform){ //執行代碼 }	回調函數，swiper的容器wrapper改變其座標時執行。返回帶當前transform 的偏移量的對象。

Example

如下須要引用jQuery文件

 1 <script src="js/jquery-1.10.1.min.js"></script>
 2  3 <script type="text/javascript">  4  5 $(document).ready(function(){  6  7 var mySwiper = $('.swiper-container').swiper({  8  9 mode : 'vertical', //選擇垂直模式， 10 11 speed : 500, //設置動畫持續時間500ms 12 13 freeMode : true, //開啓自由模式 14 15 freeModeFluid : true, //開啓'fluid'自由模式 16 17 onTouchStart : function() { 18 19 //觸控滑塊時執行代碼 20 21 alert('OMG you touch the slide!') 22 23  } 24 25  } 26 27 }) 28 29 </script>

Callbacks API

從Swiper2.4版本開始增長了一些回調函數，如今添加一些函數到上面。

當初始化Swiper時，舊版本指定回調函數的方式：

 1 $(document).ready(function(){  2  3 var mySwiper = new Swiper('.swiper-container',{  4  5 mode:'vertical',  6  7 speed: 600,  8  9 onSlideChangeStart: function(swiper){ 10 11 alert('Hello 1'); 12 13  } 14 15  }); 16 17 });

新版本中可以實現無需徹底重寫onSlideChangeStart參數，能夠添加新函數到回調函數中。

1 mySwiper.addCallback('SlideChangeStart', function(swiper){ 2 3 alert('Hello 2'); 4 5 })

你會發覺在過渡動畫開始時彈出「Hello 1」以及「Hello 2「，該種方式下addCallback方法須要注意該回調函數名不包含」on「。

解除（fire）callback 函數語句：

 mySwiper.fireCallback('SlideChangEnd',mySwiper);

移除（remove）callbacks:

mySwiper.removeCallback('SlideChangEnd');

Slides API

Swiper提供強大的Slides API，可以動態生成/刪除/操做Slides（滑塊）

Slide 實例

這個實例是簡單的HTML元素但擴展了很是有用的方法。

下面的例子變量mySwiper包含了屬性和方法的Swiper對象。

 1 <script type="text/javascript">
 2 $(document).ready(function(){  3 　　 var mySwiper = $('.swiper-container').swiper({  4 　　mode : 'vertical', //切換到垂直模式  5 　　speed : 500, //動畫持續時間  6 　　freeMode : true, //啓動自由模式  7 　　freeModeFluid : true, //啓動'fluid'自由模式  8 　　onTouchStart : function() {  9 　　//觸碰滑塊是的事件 10 　　alert('OMG you touch the slide!') 11 } 12 } 13 })</script>

經過調用一下方法，你能生成Swiper滑塊實例：

mySwiper.createSlide(html,slideClassList,element),其中：

html(string[字符型],required[必需的])-生成的滑塊的HTML元素的內容
slideClassList(stirng[字符型],optional[可選的])- 建立類」class「屬性。缺省值爲"swiper-slide "
element(string[字符型],optional[可選的])-建立滑塊的HTML標籤，缺省值爲"div"

 1 var mySwiper = $(".swiper-container").swiper({...some optins...})  2  3 //建立一個新的swiper實例  4  5 var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>");  6  7 //生成的HTML滑塊："<div class="swiper-slide"><p>Here is my new slide</p></div>"  8  9 var newSlide = mySwiper.createSlide("<p>Hello</p>","swiper-slide red-slide","span"); 10 11 //生成的HTML滑塊："<span class="swiper-slide red-slide"><p>Hello</p></span>"

"newSlide"變量包含在新建Slide實例以後,但現在還在內存中，並不在slider中。爲了將其添加到slider中，可以使用一下鏈式方法有效地添加到Slide實例中：

newSlide.append()-添加slide到slider中的最後一個位置。返回Slide實例
newSlide.prepend()-添加slide到slider中的第一個位置。返回Slide實例
newSlide.remove()-移除slide
newSlide.getWidth()-返回slide寬度
newSlide.getHeight()-返回slide高度
newSlide.getOffset()-返回包含滑塊left、top偏移量的對象
newSlide.insertAfter(index)[index-number]-插入新滑塊到index索引以後。返回Slide實例
newSide.clone()-複製slide到新slide實例。返回新複製的Slide實例

 1 //例子  2  3 var mySwiper = $(".swiper-container").swiper({...some optins...})  4  5 var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>");  6  7 newSlide.append()//newSlide添加到全部已存在的slides後面  8  9 var newSlide = mySwiper.createSlide("<p>Hello</p>","swiper-slide red-slide","span"); 10 11 newSlide.prepend()//-newSlide添加到全部已存在的slides的前面（第一個位置） 12 13 //複製、插入Slide 14 15 var clonedSlide = newSlide.clone(); 16 17 clonedSlide.append(); 18 19 //crazy 鏈式 20 21 var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>"); 22 23 newSlide.prepend().clone().append().clone().inertAfter(2) 24 25 //-新建立的slide被添加到全部已存在的slide前面，而後複製slide並添加到最後，接着在複製添加到index爲2的位置上

還有一些有用的方法：

slide.html(innerHTMl)[innerHTMl-string]-工做方式相似於jQuery/Zepto.html()方法。若是指定innerHTML，那麼它會替代原來slide裏的inner html內容，而後方法返回slide實例。

若是innerHTML沒有指定，返回slide中inner html內容。

slide.index()-返回slide索引
slide.isActive()返回true若是該塊是活動的
slide.setData(name,value)[name-string]-存儲數據方法，可以存儲全部類型變量-數組，對象，數字，字符等等
slide.getData(name)[name-string]返回存儲的變量值
slide.data(name,value)[name-string,value-string]-保存變量值到data-[name]屬性中
slide.data(name)[name-string]-返回data-[name]屬性值

 1 //例子  2  3 var mySwiper = $('.swiper-container').swiper({...some options...})  4  5 //建立slide實例  6 var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>');  7 newSlide.append().clone().html('<p>New HTML</p>').prepend()  8 // 新建立的slide被添加到最後，而後複製該slide並添加html內容，最後插入到第一個位置  9 10 var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>'); 11 alert(newSlide.html()) // -> <p>Here is my new slide</p> 12 13 Store/Get data: 14 newSlide.prepend().setData('apples',['iMac', 'MacBook Pro', 'iPhone', 'iPad']) 15 newSlide.getData('apples') // -> ['iMac', 'MacBook Pro', 'iPhone', 'iPad'] 16 17 newSlide.data('apple','iPad'); 18 newSlide.data('apple') // ->'iPad'

Swiper Slides

好的，讓咱們看看swiper是如何操做存在的slides（添加/移除）

mySwiper.slides-slides數組（slides對象）
mySwiper.appendSlide(innerHTMl,slideClassList,element)-建立新滑塊並插入到slider最後面。返回slide實例：其中：

　　　　html(string[字符型],required[必需的])-生成的滑塊的HTML元素的內容

　　　　slideClassList(stirng[字符型],optional[可選的])- 建立類」class「屬性。缺省值爲"swiper-slide "

　　　　element(string[字符型],optional[可選的])-建立滑塊的HTML標籤，缺省值爲"div"

mySwiper.appendSlide(slideInstance)[slideInstance-HTMLElement]-插入到slider末尾。返回slide實例
mySwiper.prependSlide(innerHTMl,slideClassList,element)-新建立slide並插入到slider首位置。返回slide實例
mySwiper.prependSlide(slideInstance)[slideInstance-HTMLElement]-將slideInstance插入到slider首位置。返回slide實例。
mySwiper.insertSlideAfter(index,innerHTML,slideClassList,element)-新建立slide並插入到slider指定的索引位置index。返回slide實例。
mySwiper.insertSlideAfter(index,slideInstance)-將slideInstance插入到slider指定的索引位置index。返回slide實例。
mySwiper.removeSlide(index)[index-numer]-移除索引爲index的slide
mySwiper.removeLastSlide()-移除最後一個slide
mySwiper.removeAllSlides()-移除全部slides
mySwiper.getSlide(index)[index-number]-返回index索引的slide
mySwiper.getLastSlide()-返回最後一個slide
mySwiper.getFirstSlide()-返回第一個slide

 1 //例子:  2  3 //建立slide並插入  4 mySwiper.appendSlide('Hello World')  5 //或者:  6 var newSlide = mySwiper.createSlide('Hello World')  7 mySwiper.appendSlide(newSlide)  8 //或者:  9 mySwiper.appendSlide( mySwiper.createSlide('Hello World') ) 10 11 //複製第一個slide並插入到最後 12 mySwiper.getFirstSlide().clone().append(); 13 //或者: 14 mySwiper.appendSlide( mySwiper.getSlide(0).clone() ) 15 16 //複製第二個slide修改內容並插入到最後 17 mySwiper.getSlide(1).clone().html('Hello New World!').append(); 18 19 //移除最後一個slide 20 mySwiper.removeLastSlide() 21 22 //移除第二個slide 23 mySwiper.removeSlide(1) 24 25 //Trick: 更換第一與第二個slide位置 26 mySwiper.getSlide(0).insertAfter(1) 27 28 //Trick: 移動第一個slide到最後一個位置 29 mySwiper.getFirstSlide().append() 30 31 //slide數量 32 alert(mySwiper.slides.length) 33 34 //改變每一個slide的html 35 for (var i = 0; i < mySwiper.slides.length; i++) { 36 var slide = mySwiper.slides[i] 37 slide.html('<p> My index number is '+i+' </p>') 38 }

Important Notes
重要備註
當使用改變slides數量的方法時（例如append,prepend,remove等等），reInit()方法會被調用而後slides數量會自動從新計算。因此很是不推薦動態添加/刪除slides時在"for"循環中使用"slides.length"
，由於這樣作可能產生死循環。