swiper默认选中_Swiper
Usage:
1、下載swiper最新版本https://github.com/nolimits4web/Swiper
2、在HTML?Head中添加Swiper's?CSS?and?JS:
1
2 ....
3
4
5 ....
6
其中引用的文件名以下載的為準。
3、使用下面的HTML布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
4、打開下載的文件中的idangerous.swiper.css，設置Swiper's的寬度以及高度(在文件的末尾)
/*?指定swiper?容器尺寸:?*/
.swiper-container, .swiper-slide {
width: 500px;
height: 200px;
}
5、初始化Swiper?在文檔開始處，(或在窗口加載時)
1
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
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)時禁止標簽鏈接
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
2
3
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
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
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 })
通過調用一下方法，你能生成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("
Here is my new slide
");6
7 //生成的HTML滑塊："
Here is my new slide
"8
9 var newSlide = mySwiper.createSlide("
Hello
","swiper-slide red-slide","span");10
11 //生成的HTML滑塊："
Hello
""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("
Here is my new slide
");6
7 newSlide.append()//newSlide添加到所有已存在的slides后面
8
9 var newSlide = mySwiper.createSlide("
Hello
","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("
Here is my new slide
");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('
Here is my new slide
');7 newSlide.append().clone().html('
New HTML
').prepend()8 // 新創建的slide被添加到最后，然后復制該slide并添加html內容，最后插入到第一個位置
9
10 var newSlide = mySwiper.createSlide('
Here is my new slide
');11 alert(newSlide.html()) // ->
Here is my new slide
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('
My index number is '+i+'
')38 }
Important Notes
重要備注
當使用改變slides數量的方法時(例如append,prepend,remove等等)，reInit()方法會被調用然后slides數量會自動重新計算。所以非常不推薦動態添加/刪除slides時在"for"循環中使用"slides.length"?，因為這樣做可能產生死循環。
總結
以上是生活随笔為你收集整理的swiper默认选中_Swiper的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python文件传输模块_如何将pyth
- 下一篇： git checkout 会把改动带过去