開源/免費/強大的移動端觸控滑動外掛—Swiper
Swiper是一款免費及輕量級的移動裝置觸控滑塊的框架,使用硬體加速過渡(如果該裝置支援的話),主要使用與移動端的網站/網頁應用程式(web apps)/原生應用程式(native apps),主要是為IOS而設計的,同時在Android/WP8系統及現代桌面瀏覽器也有著良好的使用者體驗
Swiper CDN
如果不想將Swiper檔案放在你的專案中，可以使用Swiper的CDN服務。以下是各版本的Swiper CDN地址，要將4.x.x改成相應的版本，如4.0.2(或3.x.x版本)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.bundle.js"></script>下載Swiper
1.可以直接去官網下載相應的swiper檔案
2.通過Bower獲取Swiper
$ bower install swiper3.通過Meteor獲取Swiper
$ meteor add nolimits4web:swiper4.通過NPM獲取Swiper
$ npm install swiperswiper初始化
new Swiper(swiperContainer,parameters)用於初始化一個Swiper,返回初始化後的Swiper例項
swiperContainer:Swiper容器的css選擇器,HTMLElement or string,必選,例如`.swiper-container`
parameters:Swiper的個性化配置,object型別,可選
一個頁面中引用多個Swiper,可以給每個容器加上ID或Class區分,要保留預設的類名swiper-container
<div class="swiper-container" id="swiper1">....<div>
<div class="swiper-container" id="swiper2">....<div>
<div class="swiper-container" id="swiper3">....<div>
var swiper1 = new Swiper(`#swiper1`);
var swiper2 = new Swiper(`#swiper2`);
var swiper3 = new Swiper(`#swiper3`);舉例
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
</div>
<script>
var mySwiper = new Swiper(`.swiper-container`, {
autoplay: true,//可選選項,自動滑動
})
</script>Basic(Swiper一般選項)
initialSlide
設定初始化時slide的索引;型別:number,預設:0,舉例:2
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
initialSlide :2, //設定為2後，Swiper初始化時activeSlide成了第三個
})
</script>direction
Slides的滑動方向,可設定水平(horizontal)或垂直(vertical);型別:string,預設:horizontal,舉例:vertical
<script>
var mySwiper = new Swiper(`.swiper-container`,{
direction : `vertical`,
})
</script>speed
滑動速度,即slider自動滑動開始到結束的時間(單位ms),也是觸控滑動時釋放至貼合的時間;型別:number,預設:300,舉例:1000
<script>
var mySwiper = new Swiper(`.swiper-container`,{
speed:300,
autoplay : {
delay:3000
},
})
</script>grabCursor
設定為true:滑鼠覆蓋Swiper時指標會變成手掌形狀,拖動時指標會變成抓手形狀(根據瀏覽器形狀有所不同);型別:boolean,預設:false,舉例:true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
grabCursor : true,
})
</script>parallax
設定為true開啟視差效果;效果可以應用於container或slide的子元素,當應用於container的子元素(常用於視差背景圖),每次切換時視差效果僅有設定值的slide個數-1分之1;型別:boolean,預設:false,舉例:true
視差位移變化
在所需要的元素上增加data-swiper-parallax屬性(與Swiper切換方向相同)或data-swiper-parallax-x(x方向)/data-swiper-parallax-y(y方向)
data-swiper-parallax接受兩種型別的引數;number(單位:px),如-300,從右邊300px進入左邊出去;percentage(百分比),移動距離=該元素寬度*percentage
視差透明度變化
在所需要的元素上增加data-swiper-parallax-opacity屬性,可選值0~1,如0.5,從半透明進入半透明出去
視差縮放變化
在所需要的元素上增加data-swiper-parallax-scale屬性,可選值如0.5,從一半大小進入一半大小出去
還可通過data-swiper-parallax-duration設定視差動畫持續時間(ms),預設值是Swiper的speed,與切換時間同步
tip:設定透明度或縮放必須同時設定位移,否則無效(4.0.5) <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度變化</div>
<div class="swiper-container">
<div style="background-image:url(/img/Parallax.jpg)" data-swiper-parallax="-23%" data-swiper-parallax-duration="3000"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-100">從右邊100px開始進入</div>
<div class="subtitle" data-swiper-parallax="-200">從右邊200px開始進入</div>
<div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
<p>從右邊300px開始進入，時間600ms</p>
</div>
<div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度變化</div>
<div data-swiper-parallax-scale="0.15" >縮放變化</div>
</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
parallax : true,
})
</script>setWrapperSize
Swiper使用flexbox佈局(display:flex),開啟這個設定會在Wrapper上新增等於slides相加的寬或高,在對flexbox佈局的支援不是很好的瀏覽器中可能需要用到;型別:boolean,預設:false,舉例:true
<script>
var mySwiper = new Swiper(`.swiper-container`,{
setWrapperSize :true,
})
</script>virtualTranslate
虛擬位移;當啟用這個引數,Swiper除了不會移動外其他的都像平時一樣執行,僅僅是不會在Wrapper上設定位移;當你想自定義一些slide切換效果時可以用,例如配合上progress;啟用這個選項時slideChange和transition等事件有效(與Swiper3.x不同);型別:boolean,預設:false,舉例:true
<script>
var mySwiper = new Swiper(`.swiper-container`,{
virtualTranslate : true,
})
</script>a11y
輔助,無障礙閱讀;開啟本引數為螢幕閱讀器新增語音提示等資訊,方便視覺障礙者,基於ARIA標準;型別:object/boolean
| 引數名 | 引數型別 | 預設值 | 定義 |
|---|---|---|---|
| prevSlideMessage | string | Previous slide | 在螢幕閱讀器為上一頁按鈕新增資訊 |
| nextSlideMessage | string | Next slide | 在螢幕閱讀器為下一頁按鈕新增資訊 |
| firstSlideMessage | string | This is the first slide | 當螢幕閱讀器處於第一個slide為上一頁按鈕新增資訊 |
| lastSlideMessage | string | This is the last slide | 當螢幕閱讀器處於最後一個slide為下一頁按鈕新增資訊 |
| paginationBulletMessage | string | Go to slide {{index}} | 當螢幕閱讀器為分頁器小點新增資訊 |
| notificationClass | string | swiper-notification | A11y公告部分的類名 |
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
navigation: {
nextEl: `.swiper-button-next`,
prevEl: `.swiper-button-prev`,
},
pagination: {
el: `.swiper-pagination`,
},
a11y : {
prevSlideMessage: `Previous slide`,
nextSlideMessage: `Next slide`,
firstSlideMessage: `This is the first slide`,
lastSlideMessage: `This is the last slide`,
paginationBulletMessage: `Go to slide {{index}}`,
notificationClass: `swiper-notification`,
},
})
</script>width
強制Swiper的寬度(px),當你的Swiper在隱藏狀態下初始化時才用得上,這個引數會使自適應失效;型別:number,舉例:500
<script>
var mySwiper = new Swiper(`.swiper-container`,{
width: 800, //你的slide寬度
//全屏 width: window.innerWidth,
})
</script>height
強制Swiper的高度(px),當你的Swiper在隱藏狀態下初始化時且切換方向為垂直才用得上,這個引數會使自適應失效;型別:number,舉例:300
<script>
var mySwiper = new Swiper(`.swiper-container`, {
direction: `vertical`,
height: 300,//你的slide高度,全屏 - height:window.innerHeight,
})
</script>roundLengths
設定為true將slide的寬和高取整(四捨五入)以防止某些解析度的螢幕上文字或邊界(border)模糊;例如在1440寬度裝置上,當你設定slide寬為76%時,則計算出來結果為1094.4,開啟後寬度取整數1094;型別:boolean,預設:false,舉例:true
<script>
var mySwiper = new Swiper(`.swiper-container`,{
roundLengths : true,
})
</script>breakpoints
斷點設定:根據螢幕寬度設定某引數為不同的值,類似於響應式佈局的media screen;只有部分不需要變換佈局方式和邏輯結構的引數支援斷點設定,如slidesPerView/slidesPerGroup/spaceBetween,而像slidesPerColumn/loop/direction/effect等則無效,型別:object
<script>
var swiper = new Swiper(`.swiper-container`, {
slidesPerView: 4,
spaceBetween: 40,
breakpoints: {
320: { //當寬度小於等於320
slidesPerView: 1,
spaceBetween: 10
},
480: { //當寬度小於等於480
slidesPerView: 2,
spaceBetween: 20
},
640: { //當寬度小於等於640
slidesPerView: 3,
spaceBetween: 30
}
}
})
</script>autoHeight
自動高度;設定為true時,wrapper和container會隨著當前slide的高度而發生變化;型別:boolean,預設:false,舉例:true
<script>
var swiper = new Swiper(`.swiper-container`, {
autoHeight: true, //高度隨內容變化
});
</script>uniqueNavElements
獨立分頁元素,當啟用(預設)且分頁元素的傳入值為字串時,swiper會優先查詢子元素匹配這些元素;可應用於分頁器/按鈕/滾動條(pagination,prev/next buttons,scrollbar elements);當你的控制元件放在container外面的時候,需要用到;型別:boolean,預設:true,舉例:false
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination: {
el: `.swiper-pagination`,
},
uniqueNavElements: false,
})
</script>nested
用於巢狀相同方向的swiper時,當切換到子swiper時停止父swiper的切換,請將子swiper的nested設定為true;由於需要在slideChangeEnd時判斷作用塊,因此快速滑動時這個選項無效;型別:boolean,預設:false,舉例:true
<script>
var mySwiper = new Swiper(`#swiper-container1`)//父swiper
var mySwiper2 = new Swiper(`#swiper-container2`,{//子swiper
nested:true,
resistanceRatio: 0,
})
</script>runCallbacksOnInit
初始化時觸發Transition/SlideChange回撥函式;型別:boolean,預設:true,舉例:false
<script>
var mySwiper = new Swiper(`.swiper-container`,{
runCallbacksOnInit : true,
})
</script>init
當你建立一個Swiper例項時是否立即初始化;如果禁止了,可以稍後使用mySwiper.init()來初始化;型別:boolean,預設:true,舉例:false
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
init: false,
})
mySwiper.init();//現在才初始化
</script>preloadImages
預設為true,Swiper會強制載入所有圖片;型別:boolean,預設:true,舉例:false
<script>
var mySwiper = new Swiper(`.swiper-container`,{
preloadImages:false,
})
</script>updateOnImagesReady
當所有的內嵌影像(img標籤)載入完成後Swiper會重新初始化,使用此選項需要先開啟preloadImages:true;型別:boolean,預設:true,舉例:false
<script>
var mySwiper = new Swiper(`.swiper-container`,{
updateOnImagesReady : true,
})
</script>on
註冊事件,Swiper4.0開始使用關鍵詞this指代Swiper例項;型別:object
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`, {
on: {
slideChange: function () {
console.log(this.activeIndex);
},
},
};
//或者
var mySwiper = new Swiper(`.swiper-container`);
mySwiper.on(`slideChange`, function () {
//...
});
</script>Slides grid(網格分佈)
centeredSlides
設定為true時,active slide會居中,而不是預設狀態下的居左;型別:boolean,預設:false,舉例:true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
slidesPerView : 3,
centeredSlides : true,
})
</script>slidesPerView
設定slider容器能夠同時顯示的slides數量(carousel模式),可以設定為數字(可為小數,小數不可loop)或`auto`(則自動根據slides的寬度來設定數量),loop模式下如果設定為`auto`還需要設定另外一個引數loopedSlides;型別:number/auto,預設:1,舉例:2
slidesPerGroup
在carousel mode下定義slides的數量多少為一組;型別:number,預設:1,舉例:3
<script>
var mySwiper = new Swiper(`.swiper-container`,{
slidesPerView : 3,
slidesPerGroup : 3,
})
</script>spaceBetween
slide之間的距離(單位px);型別:number,預設:0,舉例:20
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
slidesPerView : 3,
spaceBetween : 20,
//spaceBetween : `10%`,按container的百分比
})
</script>slidesPerColumn
多行佈局裡面每列的slide數量;型別:number,預設:1,舉例:2
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
slidesPerColumn : 2,
})
</script>slidesPerColumnFill
多行佈局中以什麼形式填充：
`column`（列）
1 3 5
2 4 6
`row`（行）。
1 2 3
4 5 6
型別:string,預設:column,舉例:row
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
slidesPerColumn : 2,
slidesPerColumnFill : `row`,
})
</script>slidesOffsetBefore
設定slide與左邊框的預設偏移量(單位px);型別:number,預設:0,舉例:100
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
slidesOffsetBefore : 100,
})
</script>slidesOffsetAfter
設定slide與右邊框的預設偏移量(單位px);型別:number,預設:0,舉例:100
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
slidesOffsetAfter : 100,
})
</script>normalizeSlideIndex
使你的活動塊指示為最左邊的那個slide(沒開啟centeredSlides時);型別:boolean,預設:true,舉例:false
<script>
var mySwiper = new Swiper(`.swiper-container`,{
normalizeSlideIndex:false,
})
</script>Free Mode(free模式/抵抗反彈)
freeMode
預設為false,普通模式:slide滑動時只滑動一格,並自動貼合wrapper,設定為true則變為free模式,slide會根據慣性滑動且不會貼合;型別:boolean,預設:false,舉例:true
<script>
var mySwiper = new Swiper(`.swiper-container`,{
freeMode : true,
})
</script>freeModeMomentum
free模式動量;free模式下,若設定為false則關閉動量,釋放slide之後立即停止不會滑動;型別:boolean,預設:true,舉例:false
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
freeMode : true,
freeModeMomentum : false,
})
</script>freeModeMomentumRatio
free模式動量值(移動慣量),設定的值越大,當釋放slide時的滑動時間越長,預設1s;型別:number,預設:1,舉例:5
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
freeMode : true,
freeModeMomentumRatio : 5,
})
</script>freeModeMomentumVelocityRatio
free模式慣性速度,設定越大,釋放後滑得越快;型別:number,預設:1,舉例:2
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
freeMode : true,
freeModeMomentumVelocityRatio : 5,
})
</script>freeModeMomentumBounce
動量反彈;false時禁用free模式下的動量反彈,slides通過慣性滑動到邊緣時,無法反彈,注意與resistance(手動抵抗)區分;型別:boolean,預設:true,舉例:false
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
freeMode : true,
freeModeMomentumBounce : false,
})
</script>freeModeMomentumBounceRatio
值越大產生的邊界反彈效果越明顯,反彈距離越大;型別:number,預設:1,舉例:2
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
freeMode : true,
freeModeMomentumBounceRatio : 5,
})
</script>freeModeSticky
使得freeMode也能自動貼合;型別:boolean,預設:false,舉例:true
<script>
var mySwiper = new Swiper(`.swiper-container`,{
freeMode : true,
freeModeSticky : true,
})
</script>freeModeMinimumVelocity
觸發FreeMode慣性的最小觸控速度(px/ms),低於這個值不會慣性滑動;型別:number,預設:0.02
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
freeMode : true,
freeModeMinimumVelocity : 1, //設定為1後需要觸控很快才能產生慣性
})
</script>Loop(環路)
loop
設定為true則開啟loop模式;loop模式:會在原本slide前後複製若干個slide(預設一個)並在合適的時候切換,讓Swiper看起來是迴圈的;loop模式在與free模式同用時會產生抖動,因為free模式下沒有複製slide的時間點;型別:boolean,預設:false,舉例:true
<script>
var mySwiper = new Swiper(`.swiper-container`,{
loop : true,
})
/*如果只有一個slide就銷燬swiper
if(mySwiper.slides.length<=3){
mySwiper.destroy();
}*/
</script>loopAdditionalSlides
loop模式下會在slides前後複製若干個slide,前後複製的個數不會大於原總個數;預設為0,前後各複製1個;0,1,2 –> 2,0,1,2,0
例:取值為1;0,1,2 –> 1,2,0,1,2,0,1
例:取值為2或以上，0,1,2 –> 0,1,2,0,1,2,0,1,2
型別:number,預設:0,舉例:1
<script>
var mySwiper = new Swiper(`.swiper-container`,{
loop : true,
loopAdditionalSlides : 3, //取值為3後，總slide數為本來6個，加上前後各複製4個
})
</script>loopedSlides
在loop模式下使用slidesPerview:`auto`,還需使用該引數設定所要用到的loop個數(一般設定為本來slide的個數);型別:number,預設:1,舉例:8
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
<div class="swiper-slide">slider4</div>
<div class="swiper-slide">slider5</div>
<div class="swiper-slide">slider6</div>
<div class="swiper-slide">slider7</div>
<div class="swiper-slide">slider8</div>
</div>
</div>
<script>
var mySwiper = new Swiper(`.swiper-container`,{
loop: true,
slidesPerView: `auto`,
loopedSlides: 8,
})
</script>loopFillGroupWithBlank
在loop模式下為group填充空白slide;型別:boolean,預設:false,舉例:true
<script>
var mySwiper = new Swiper(`.swiper-container`,{
slidesPerView: 3,
slidesPerGroup: 3,
loop: true,
loopFillGroupWithBlank: true, //因為一組有3個slide，因此第八個slide後面填充了一個空白的slide
})
</script>progress(進度)
watchSlidesProgress
開啟這個引數來計算每個slide的progress(進度/程式),Swiper的progress無需設定即開啟,對於slide的progress屬性,活動的那個為0,其他的依次減1;例:一共有6個slide,活動的是第三個,從第一個到第六個的progress屬性分別是:2 1 0 -1 -2 -3
對於swiper的progress屬性,活動的slide在最左(上)邊時為0,活動的slide在最右(下)邊時為1,其他情況平分;例:有6個slide,當活動的是第三個時swiper的progress屬性是0.4,當活動的是第五個時swiper的progress屬性是0.8
swiper的progress其實就是wrapper的translate值的百分值,與activeIndex等屬性不同,progress是隨著swiper的切換而不停的變化,而不是在某個時間點突變;型別:boolean,預設:false,舉例:true
watchSlidesVisibility
開啟watchSlidesVisibility選項前需要先開啟watchSlidesProgress,如果開啟了watchSlidesVisibility,則會在每個可見slide增加一個classname,預設為`swiper-slide-visible`;型別:boolean,預設:false,舉例:true
<script>
var mySwiper = new Swiper(`.swiper-container`,{
watchSlidesProgress : true,
watchSlidesVisibility : true, //利用watchSlidesVisibility和clickedIndex製作寬度超出後自動適應的導航
})
</script>clicks(點選)
preventClicks
當swiper在觸控時阻止預設事件(preventDefault),用於防止觸控時觸發連結跳轉;型別:boolean,預設:true,舉例:false
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
preventClicks : false,//這個例子設為了false，因此觸控時連結跳轉了
})
</script>preventClicksPropagation
阻止click冒泡,拖動Swiper時阻止click事件;型別:boolean,預設:true,舉例:false
<div class="swiper-slide" onclick="alert(`你點了Swiper`)">
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
preventLinksPropagation : false,
})
</script>slideToClickedSlide
設定為true則點選slide會過渡到這個slide;型別:boolean,預設:false,舉例:true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
slideToClickedSlide:true,
})
</script>touches(觸發條件)
touchRatio
觸控距離與slide滑動距離的比率;型別:number,預設:1,舉例:0.5
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
touchRatio : 0.5, //設定為0.5後slide滑動距離只有觸控距離的一半,變得難以滑動,也可以設定為負值
})
</script>simulateTouch
預設為true,Swiper接受滑鼠點選/拖動;型別:boolean,預設:true,舉例:false
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
simulateTouch : false, //滑鼠無效
})
</script>allowTouchMove
值為false時slide無法拖動,只能使用擴充套件API函式例如slideNext()/slidePrev()/slideTo()等改變slides滑動,等同於Swiper3.x的onlyExternal;型別:boolean,預設:true,舉例:false
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
allowTouchMove: false, //無法拖動
navigation: {
prevEl: `.swiper-button-prev`,
nextEl: `.swiper-button-next`,
},
})
</script>followFinger
如設定為false拖動slide時它不會動,當釋放時slide才會切換;型別:boolean,預設:true,舉例:false
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
followFinger : false, //拖動後釋放滑鼠或手指時slide滑動
})
</script>shortSwipes
設定為false時，進行快速短距離的拖動無法觸發Swiper;型別:boolean,預設:true,舉例:false
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
shortSwipes : false, //輕輕觸碰就可以切換
})
</script>longSwipes
設定為false時,進行長時間長距離的拖動無法觸發Swiper;型別:boolean,預設:true,舉例:false
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
longSwipes : false,
})
</script>longSwipesMs
定義longSwipes的時間(單位ms),超過則屬於longSwipes;型別:number,預設:300,舉例:1000
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
longSwipesMs : 1000,
longSwipes:false,
})
</script>longSwipesRatio
進行longSwipes時觸發swiper所需要的最小拖動距離比例,即定義longSwipes距離比例,值越大觸發Swiper所需距離越大,最大值0.5;型別:number,預設:0.5,舉例:0.3
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
longSwipesRatio : 0.1, //緩慢拖動釋放檢視效果
})
</script>threshold
拖動的臨界值(單位為px),如果觸控距離小於該值滑塊不會被拖動;型別:number,預設:false,舉例:100
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
threshold : 100, //必須拖動大於100px後slide才會開始移動
})
</script>touchAngle
允許觸發拖動的角度值,預設45度,即使觸控方向不是完全水平也能拖動slide;型別:number,預設:45,舉例:10
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
touchAngle : 10, //設定了很小的允許拖動角度（10）
})
</script>touchMoveStopPropagation
true時阻止touchmove冒泡事件;型別:boolean,預設:true,舉例:false
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
touchMoveStopPropagation : false,
})
</script>resistance
邊緣抵抗;當swiper已經處於第一個或最後一個slide時,繼續拖動Swiper會離開邊界,釋放後彈回;邊緣抵抗就是拖離邊界時的抵抗力,值為false時禁用,將slide拖離邊緣時完全沒有抗力;型別:boolean,預設:true,舉例:false
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
resistance : false,
})
</script>resistanceRatio
抵抗率,邊緣抵抗力的大小比例;值越小抵抗越大越難將slide拖離邊緣,0時完全無法拖離;型別:number,預設:0.85,舉例:0.7
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
resistanceRatio : 0.9,
})
</script>iOSEdgeSwipeDetection
設定為true開啟IOS的UIWebView環境下的邊緣探測,如果拖動是從螢幕邊緣開始則不觸發swiper;這樣當你在螢幕邊緣觸控時,則可以返回上一頁(history.back);型別:boolean,預設:false,舉例:true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
iOSEdgeSwipeDetection : true,
})
</script>iOSEdgeSwipeThreshold
IOS的UIWebView環境下的邊緣探測距離,如果拖動小於邊緣探測距離則不觸發swiper;型別:number,預設:20,舉例:50
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
iOSEdgeSwipeDetection : true,
iOSEdgeSwipeThreshold : 50,
})
</script>passiveListeners
用來提升swiper在移動裝置的中的scroll表現(Passive Event Listeners),但是會和e.preventDefault衝突,所以有時候你需要關掉它;型別:boolean,預設:true,舉例:false
<script>
var mySwiper = new Swiper(`.swiper-container`,{
passiveListeners : false,
})
</script>touchReleaseOnEdges
當滑動到Swiper的邊緣時釋放滑動,可用於同向Swiper的巢狀(移動端觸控有效);型別:boolean,預設:false,舉例:true
<script>
var mySwiper = new Swiper(`.swiper-container`,{
touchReleaseOnEdges:true,
})
</script>touchEventsTarget
接受touch事件的目標,可以設為container或者wrapper;型別:string,預設:container,舉例:wrapper
<script>
var mySwiper = new Swiper(`.swiper-container`,{
touchEventsTarget: `wrapper`,
})
</script>swiping/no swiping(禁止切換)
noSwiping
設為true時,可以在slide上(或其他元素)增加類名`swiper-no-swiping`,使該slide無法拖動,希望文字被選中時可以考慮使用;型別:boolean,預設:true,舉例:false
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
slider1</div>
<div class="swiper-slide swiper-no-swiping"> <!-- 第二個slide上增加了類swiper-no-swiping，因此無法滑動（但是可以通過元件切換） -->
slider2</div>
<div class="swiper-slide">
slider3</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
noSwiping : true,
})
</script>noSwipingClass
不可拖動塊的類名,當noSwiping設定為true時,並且在slide(或其他元素)加上此類名,目標將無法觸控拖動;型別:string,預設:swiper-no-swiping,舉例:stop-swiping
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
slider1</div>
<div class="swiper-slide stop-swiping"> <!-- 第二個slider加入了stop-swiping，所以第二個slide觸控無效（但是可以通過元件切換） -->
slider2</div>
<div class="swiper-slide">
slider3</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
noSwiping : true,
noSwipingClass : `stop-swiping`,
})
</script>allowSlideNext
設定為false可禁止向右或下滑動;型別:boolean,預設:true,舉例:false
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
allowSlideNext : false,
})
</script>allowSlidePrev
設為false可禁止向左或上滑動;型別:boolean,預設:true,舉例:false
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
allowSlidePrev : false, //鎖定了向左滑動，按鈕元件也失效了
})
</script>swipeHandler
CSS選擇器或者HTML元素,你只能拖動它進行swiping;型別:string / HTMLElement,預設:null,舉例:.swipe-handler
<div class="swipe-handler">
你只能拖動這裡</div>
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
swipeHandler : `.swipe-handler`,
})
//4.0.5BUG處理
if (params.swipeHandler) {
if (!$$1(e.target).closest(params.swipeHandler)[0]) { return; }
}
</script>observer(監視器)
observer
啟動動態檢查器(OB/觀眾/觀看者),當改變swiper的樣式(例如隱藏/顯示)或者修改swiper的子元素時,自動初始化swiper;預設false,不開啟,可以使用update()方法更新;型別:boolean,預設:false,舉例:true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination : `.swiper-pagination`,
observer:true,
})
$(`#btn1`).click(function(){
$(".swiper-wrapper .swiper-slide1").remove();
})
</script>observeParents
將observe應用於Swiper的父元素,當Swiper的父元素變化時,例如window.resize/Swiper更新;型別:boolean,預設:false,舉例:true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination : `.swiper-pagination`,
observer:true,
observeParents:true,
})
</script>namespace(名稱空間)
wrapperClass
設定wrapper的css類名;型別:string,預設:swiper-wrapper,舉例:my-wrapper
<div class="swiper-container">
<div class="my-wrapper">
<div class="swiper-slide">
slider1</div>
<div class="swiper-slide">
slider2</div>
<div class="swiper-slide">
slider3</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
wrapperClass : `my-wrapper`,
})
</script>
<style type="text/css">
.my-wrapper{
display: flex;
}
</style>slideClass
設定slide的類名;型別:string,預設:swiper-slide,舉例:my-slide
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="my-slide">slider1</div>
<div class="my-slide">slider2</div>
<div class="my-slide">slider3</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
slideClass : `my-slide`,
})
</script>slideActiveClass
設定活動塊的類名;型別:string,預設:swiper-slide-active,舉例:my-active-slide
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
slideActiveClass : `swiper-slide-active`,
})
</script>slideVisibleClass
設定可視塊的類名;型別:string,預設:swiper-slide-visible,舉例:my-visible-slide
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
watchSlidesProgress : true,
watchSlidesVisibility : true,
slideVisibleClass : `my-slide-visible`,
})
</script>slideDuplicateClass
loop模式下被複制的slide的類名;型別:string,預設:swiper-slide-duplicate,舉例:my-slide-duplicate
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
slideDuplicateClass : `my-slide-duplicate`,
})
</script>slideNextClass
active slide的下一個slide的類名;型別:string,預設:swiper-slide-next,舉例:my-slide-next
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
slideNextClass : `my-slide-next`,
})
</script>slidePrevClass
active slide的前一個slide的類名;型別:string,預設:swiper-slide-prev,舉例:my-slide-prev
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
slidePrevClass : `my-slide-prev`,
})
</script>slideDuplicatedActiveClass
loop模式下活動塊對應複製塊的類名,或者相反;型別:string,預設:swiper-slide-duplicate-active,舉例:my-slide-duplicate-active
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
slideDuplicatedActiveClass : `my-slide-duplicate-active`,
})
</script>slideDuplicatedNextClass
loop模式下,下一個slide對應複製塊的類名,或者相反;型別:string,預設:swiper-slide-duplicate-next,舉例:my-slide-duplicate-next
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
slideDuplicatedNextClass : `my-slide-duplicate-next`,
})
</script>slideDuplicatedPrevClass
loop下,前一個slide對應複製塊的類名,或者相反;型別:string,預設:swiper-slide-duplicate-prev,舉例:my-slide-duplicate-prev
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
slideDuplicatedPrevClass : `my-slide-duplicate-prev`,
})
</script>containerModifierClass
可以修改某些以swiper-container-為開頭的類名;型別:string,預設:swiper-container-,舉例:my-container-
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
containerModifierClass : `my-container-`,
})
</script>callbacks(回撥函式)
init
回撥函式,初始化後執行
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on: {
init: function(){
//Swiper初始化了
alert(`當前的slide序號是`+this.activeIndex);
},
},
})
</script>touchStart(event)
回撥函式,當碰觸到slider時執行,可選touchstart事件作為引數
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on: {
touchStart: function(event){ //接觸時觸發
alert(`事件觸發了;`);
},
},
})
</script>touchMove(event)
手指觸碰Swiper並滑動(手指)時執行,接受touchmove事件作為引數,此時slide不一定會發生移動,比如你手指的移動方向和swiper的切換方向垂直時,對比sliderMove
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
touchMove: function(event){
//你的事件
},
},
})
</script>touchEnd(event)
回撥函式,觸控釋放時執行,接受touchend事件作為引數(釋放即執行)
<script>
var mySwiper = new Swiper(`.swiper-container`,{
on: {
touchEnd: function(event){ //在最後一頁繼續拖動則釋放跳轉
//你的事件
},
},
})
</script>slideChangeTransitionStart
回撥函式,swiper從當前slide開始過渡到另一個slide時執行;與Swiper3.x版本中的onSlideChangeStart(swiper)不同的是,即使釋放slide時沒有達到過渡條件而回彈也會觸發這個函式,輸出的activeIndex是過渡後的slide索引
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on: {
slideChangeTransitionStart: function(){
alert(this.activeIndex);
},
},
})
</script>slideChangeTransitionEnd
回撥函式,swiper從一個slide過渡到另一個slide結束時執行
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on: {
slideChangeTransitionEnd: function(){
alert(this.activeIndex);//切換結束時，告訴我現在是第幾個slide
},
},
})
</script>imagesReady
回撥函式,所有內建影像載入完成後執行,同時”updateOnImagesReady”需設定為true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on: {
imagesReady: function(){
alert(`圖片載入完成了`);
},
},
})
</script>transitionStart
回撥函式,過渡開始時觸發,接受Swiper例項作為引數
Swiper運作原理:
Swiper常用運作方式有兩種:手動觸控切換或者導航切換(前進後退按鈕/鍵盤控制/分頁器/內建方法slideTo等)
1.手動觸控切換拖動階段Swiper根據手勢位置實時設定wrapper的位移(setTranslate),釋放拖動時Swiper會設定一次wrapper自由過渡(setTranslate/setTransition/transitionStart/slideChangeTransitionStart),速度為speed直到過渡結束(transitionEnd/slideChangeTransitionEnd)
2.導航切換可參考手動觸控釋放階段
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
transitionStart: function(){
...
},
},
})
</script>transitionEnd
回撥函式,過渡結束時觸發,接收Swiper例項作為引數;如果你使用setWrapperTranslate和setWrapperTransition來設定wrapper移動,這個函式不會觸發,你可以使用原生transitionEnd事件;人為中斷過渡不會觸發這個函式
<script>
var mySwiper = new Swiper(`.swiper-container`, {
slidesPerView: 3,
spaceBetween: 30,
on:{
transitionEnd: function(swiper){
alert(`過渡結束`);
},
},
});
$(`#btn1`).click(function(){
mySwiper.setTransition(1000);
mySwiper.setTranslate(-1000);
mySwiper.$wrapperEl.transitionEnd(function () {
alert(`swiper自帶transitionEnd不會觸發，這是自定義的`);
});
})
</script>touchMoveOpposite(event)
回撥函式,當手指觸碰Swiper且沒有按照direction設定的方向移動時執行,此時slide沒有被拖動,這與sliderMove事件相反,可選touchmove事件作為引數;型別:function
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
touchAngle : 10,
on:{
touchMoveOpposite(event){
console.log(event); //設定了很小的允許拖動角度(10)
},
},
})
</script>sliderMove(event)
回撥函式,手指觸碰Swiper並拖動slide時執行,接受touchmove事件作為引數
<script>
var mySwiper = new Swiper(`.swiper-container`,{
autoplay:true,
speed:1000,
on:{
sliderMove: function(){
$(`#showhtml`).html(`函式觸發了`);
},
},
})
function check(){
$(`#showhtml`).html(`普通狀態`);
}
setInterval("check()", 300)
</script>click(event)
回撥函式,當點選或輕觸Swiper用300ms後執行，接受touchend事件作為引數
觸發時機:
如果沒有觸發touchMove(),則釋放觸控/滑鼠時:
1.立即執行tap()
2.如果觸控/滑鼠按壓時間小於300ms,並且兩次觸控/點選間隔大於300ms,延遲300ms執行onClick
3.如果觸控/滑鼠按壓時間小於300ms,並且兩次觸控/點選間隔小於300ms,立即執行doubleTap
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
click: function(){
alert(`你點了Swiper`);
},
},
})
</script>tap(event)
回撥函式,當你輕觸(tap)Swiper後執行;在移動端,click會有200~300ms延遲,所以請用tap代替click作為點選事件,接受touchend事件作為引數
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
tap: function(event){
alert(`你碰了Swiper`);
},
},
})
</script>doubleTap(event)
回撥函式,當你兩次輕觸Swiper時執行,類似於雙擊,接受touchend事件作為引數
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
doubleTap: function(event){
alert(`你雙擊了Swiper`);
},
},
})
</script>progress(progress)
回撥函式,當Swiper的progress被改變時執行,接受Swiper的progress作為引數(0-1);型別:function
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
watchSlidesProgress : true,
on:{
progress: function(progress){
console.log(progress);
},
},
})
</script>reachBeginning()
回撥函式,Swiper切換到初始化位置時執行
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
reachBeginning: function(){
alert(`到了第一個slide`);
},
},
})
</script>reachEnd()
回撥函式,當Swiper切換到最後一個Slide時執行
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
reachEnd: function(){
alert(`到了最後一個slide`);
},
},
})
</script>beforeDestroy()
回撥函式,銷燬Swiper時執行;型別:function
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
destroy: function(){
alert(`你銷燬了Swiper;`);
},
},
})
$(`#btn1`).click(function(){
mySwiper.destroy(false);
})
</script>setTransition(transition)
回撥函式,每當設定Swiper開始過渡動畫時執行,transtion獲取到的是Swiper的speed值;型別:function
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
setTransition: function(){
//自定義事件
},
},
})
</script>resize()
當你的瀏覽器尺寸發生變化時執行;型別:function
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on: {
resize: function(){
//視窗變化了
},
},
})
</script>setTranslate(translate)
回撥函式;當設定wrapper的偏移量時執行,可選swiper物件和wrapper的偏移量作為引數;型別:function
當觸控切換Swiper時Swiper分兩步驟執行:
1.接觸期間根據觸控位置實時設定Wrapper的tlanslate,此時實時執行setTranslate
2.手指放開時設定一次tlanslate和transition,此時執行一次setTranslate和setTransition和transitionStart,切換結束時執行transitionEnd一次
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
setTranslate: function(translate){
//自定義事件
},
},
})
</script>slideNextTransitionStart
回撥函式,滑塊釋放時如果觸發slider向前(右/下)切換則執行,類似於slideChangeTransitionStart,但規定了方向
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
slideNextTransitionStart: function(){
alert(`開始切換`);
},
},
})
</script>slideNextTransitionEnd
回撥函式,slider向前(右/下)切換結束時執行,類似於slideChangeTransitionEnd,但規定了方向
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
slideNextTransitionEnd: function(){
alert(`切換結束了`);
},
},
})
</script>slidePrevTransitionStart
回撥函式,滑塊釋放時如果觸發slider向後(左/上)切換則執行,類似於slideChangeTransitionStart,但規定了方向
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
slidePrevTransitionStart: function(){
alert(`開始切換`);
},
},
})
</script>slidePrevTransitionEnd
回撥函式,slider向後(左/上)切換結束時執行,類似於slideChangeTransitionEnd,但規定了方向;型別:function
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
slidePrevTransitionEnd: function(){
alert(`切換結束了`);
},
},
})
</script>fromEdge
當Swiper是從第一個或最後一個Slide切換時執行;型別:function
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
fromEdge: function(){
alert(`是從左右最兩邊切過來的`);
},
},
})
</script>slideChange
噹噹前Slide切換時執行(activeIndex發生改變)
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
slideChange: function(){
alert(`改變了`);
},
},
})
</script>properties(swiper屬性)
mySwiper.activeIndex
返回當前活動塊(啟用塊)的索引,loop模式下注意該值會被加上覆制的slide數
<script>
var mySwiper = new Swiper(`.swiper-container`,{
})
$(`#btn1`).click(function(){
alert(mySwiper.activeIndex);
})
</script>mySwiper.realIndex
當前活動塊的索引,與activeIndex不同的是,在loop模式下不會將複製的塊的數量計算在內
<script>
var mySwiper = new Swiper(`.swiper-container`,{
loop:true,
})
$(`#btn1`).click(function(){
alert(mySwiper.realIndex);
})
</script>mySwiper.previousIndex
返回上一個活動塊的索引,切換當前索引
<script>
var mySwiper = new Swiper(`.swiper-container`,{
})
$(`#btn1`).click(function(){
alert(mySwiper.previousIndex);
})
</script>mySwiper.width / mySwiper.height
獲取swiper容器的寬度/高度
<script>
var mySwiper = new Swiper(`.swiper-container`,{
})
$(`#btn1`).click(function(){
alert(mySwiper.width);
alert(mySwiper.height);
})
</script>mySwiper.touches
返回包含觸控資訊的物件陣列,就是這5個:mySwiper.touches.startX / mySwiper.touches.startY / mySwiper.touches.currentX / mySwiper.touches.currentY / mySwiper.touches.diff
<script>
var mySwiper = new Swiper(`.swiper-container`,{
})
$(`#btn1`).click(function(){
var txt=``;
for (i in mySwiper.touches){
txt+=i+`=`+mySwiper.touches[i];
}
alert(txt);
})
</script>mySwiper.params
重要引數,獲取Swiper物件初始化引數,或重寫該引數,如:mySwiper.params.speed = 200。
tips:不是所有引數都可以重寫
<script>
var mySwiper = new Swiper(`.swiper-container`,{
autoplay: {
delay:3000,
disableOnInteraction: false,
},
})
$(`#btn1`).click(function(){
alert(`速度變快了`);
mySwiper.params.autoplay.delay=500;
})
</script>mySwiper.$el
swiper的container的Dom7/jQuery物件,可以通過mySwiper.el得到container的HTML元素
<script>
var mySwiper = new Swiper(`.swiper-container`,{
})
mySwiper.el.style.opacity=0.5;
//mySwiper.$el.css({opacity: 0.1});
</script>mySwiper.$wrapperEl
獲取swiper的wrapper的Dom7物件,可以通過mySwiper.wrapperEl得到wrapper的HTML元素
<script>
var mySwiper = new Swiper(`.swiper-container`,{
})
mySwiper.$wrapperEl.addClass(`my-class`);
</script>mySwiper.slides
獲取Swiper的slides的Dom7/jQuery物件,通過mySwiper.slides[1]獲取特定的slide
<script>
var mySwiper = new Swiper(`.swiper-container`,{
})
$(`#btn1`).click(function(){
alert(mySwiper.slides.length);
mySwiper.slides[0].style.opacity=0.5;//獲取slide的HTML元素並修改樣式
//mySwiper.slides[0].className=`className`;
//mySwiper.slides.eq(0).css({opacity: 0.1});獲取slide的DOM7元素並修改樣式
//mySwiper.slides.eq(0).addClass(`className`);Swiper非JQ版帶有addClass、removeClass等
})
</script>mySwiper.translate
獲取wrapper的位移
<script>
var mySwiper = new Swiper(`.swiper-container`,{
})
$(`#btn1`).click(function(){
alert(mySwiper.translate);
})
</script>mySwiper.progress
獲取Swiper的progress值;對於swiper的progress屬性,活動的slide在最左/上邊時為0,活動的slide在最右/下邊時為1,其他情況平分;例:有6個slide,當活動的是第三個時swiper的progress屬性是0.4,當活動的是第五個時swiper的progress屬性是0.8
<script>
var mySwiper = new Swiper(`.swiper-container`,{
})
$(`#btn1`).click(function(){
alert(mySwiper.progress);
})
</script>mySwiper.isBeginning
如果Swiper位於最左/上,這個值為true
<script>
var mySwiper = new Swiper(`.swiper-container`,{
})
$(`#btn1`).click(function(){
if(mySwiper.isBeginning){
alert(`是`);
}else{
alert(`不是`);
}
})
</script>mySwiper.isEnd
如果Swiper位於最右/下,這個值為true
<script>
var mySwiper = new Swiper(`.swiper-container`,{
})
$(`#btn1`).click(function(){
if(mySwiper.isEnd){
alert(`是`);
}else{
alert(`不是`);
}
})
</script>mySwiper.animating
如果Swiper正在過渡/自由滑動,這個值為true
<script>
var mySwiper = new Swiper(`.swiper-container`,{
autoplay:1000,
})
function check(){
if(mySwiper.animating){
$(`#showhtml`).html(`Swiper正在過渡`);
}else{
$(`#showhtml`).html(`Swiper沒有在過渡`);
}
}
setInterval("check()", 10)
</script>mySwiper.clickedIndex
返回最後點選Slide的索引(click)
<script>
var mySwiper = new Swiper(`.swiper-container`,{
})
$(`#btn1`).click(function(){
alert(mySwiper.clickedIndex);
})
</script>mySwiper.clickedSlide
返回最後點選(非拖動)的Slide的HTML元素
<script>
var mySwiper = new Swiper(`.swiper-container`,{
})
$(`#btn1`).click(function(){
mySwiper.clickedSlide.style.height=`400px`;
})
</script>mySwiper.allowSlideNext
提示或設定是否允許切換至下一個slide
<script>
var mySwiper = new Swiper(`.swiper-container`);
$(`#btn1`).click(function(){
mySwiper.allowSlideNext= false;//設定
alert(mySwiper.allowSlideNext); //提示
})
</script>mySwiper.allowSlidePrev
設定/提示是否允許切換至前一個slide
<script>
var mySwiper = new Swiper(`.swiper-container`);
$(`#btn1`).click(function(){
mySwiper.allowSlidePrev= false;//設定
alert(mySwiper.allowSlidePrev); //提示
})
</script>mySwiper.allowTouchMove
設定/檢視是否禁止觸控滑動
<script>
var mySwiper = new Swiper(`.swiper-container`,{
navigation: {
nextEl: `.swiper-button-next`,
prevEl: `.swiper-button-prev`,
},
});
$(`#btn1`).click(function(){
mySwiper.allowTouchMove= false;//設定
alert(mySwiper.allowTouchMove); //提示
})
</script>methods(swiper方法)
mySwiper.slideNext(speed, runCallbacks)
滑動到下一個滑塊;speed:可選,切換速度;runCallbacks:可選,設為false不觸發transition回撥函式
<script>
var mySwiper = new Swiper(`.swiper-container`);
$(`#btn1`).click(function(){
mySwiper.slidePrev();
})
$(`#btn2`).click(function(){
mySwiper.slideNext();
})
</script>mySwiper.slidePrev(runCallbacks, speed)
滑動到前一個滑塊;speed:可選,切換速度;runCallbacks:可選,設為false不觸發transition回撥函式
<script>
var mySwiper = new Swiper(`.swiper-container`);
$(`#btn1`).click(function(){
mySwiper.slidePrev();
})
$(`#btn2`).click(function(){
mySwiper.slideNext();
})
</script>mySwiper.slideTo(index, speed, runCallbacks)
Swiper切換到指定slide;index:必選,num,指定將要切換到的slide的索引;speed:可選,num(單位ms),切換速度;runCallbacks:可選,boolean,設定為false時不會觸發transition回撥函式
<script>
var mySwiper = new Swiper(`.swiper-container`);
$(`#btn`).click(function(){
mySwiper.slideTo(0, 1000, false);//切換到第一個slide，速度為1秒
})
</script>mySwiper.destroy(deleteInstance, cleanupStyles)
銷燬Swiper;銷燬所有繫結的監聽事件,移除滑鼠鍵盤事件,釋放瀏覽器記憶體;deleteInstance:可選,設為false則不銷燬Swiper物件,預設為true;cleanupStyles:可選,設為true則清除所有swiper設定選項和樣式,比如derection等,預設為false
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
autoplay: true,
keyboard : true,
mousewheel : true,
on: {
click: function(){
alert(`你點了Swiper`);
}
}
})
mySwiper.destroy(false); //移除所有slide監聽事件，所以拖動和click事件失效了。
</script>mySwiper.getTranslate()
返回實時的wrapper位移(translate);這與通過屬性mySwiper.translate獲取到的數值稍有不同,即使是在過渡時(animating)也能獲取到,而後者精度較高
<script>
var mySwiper = new Swiper(`.swiper-container`);
$(`#btn1`).click(function(){
alert(mySwiper.getTranslate());
})
</script>mySwiper.setTranslate(translate)
手動設定wrapper的位移;translate:必選,位移值(單位px)
<script>
var mySwiper = new Swiper(`.swiper-container`);
$(`#btn1`).click(function(){
mySwiper.setTransition(1000);
mySwiper.setTranslate(-300);
})
</script>mySwiper.removeSlide(index)
移除索引為index的slide;例如:
mySwiper.removeSlide(0); //移除第一個
mySwiper.removeSlide([0, 1]); //移除第一個和第二個
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`);
$(`#btn1`).click(function(){
mySwiper.removeSlide(1); //移除第二個slide
})
</script>mySwiper.removeAllSlides()
移除所有slides
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`);
$(`#btn1`).click(function(){
mySwiper.removeAllSlides(); //移除全部
})
</script>mySwiper.updateSize()
這個方法會重新計算Swiper的尺寸
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`)
$(`#btn1`).click(function(){
alert(mySwiper.height);
})
$(`#btn2`).click(function(){
mySwiper.slides[0].style.height=`400px`;
})
$(`#btn3`).click(function(){
mySwiper.updateSize();
alert(`Swiper的高度更新了`);
})
</script>mySwiper.updateSlides()
這個方法會重新計算Slides的數量,當你使用js來刪除slide時可能會用到;使用mySwiper.removeSlide來刪除slide則會自動計算,無需使用此方法
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
slidesPerColumn : 2,
})
$(`#btn1`).click(function(){
$(".swiper-wrapper .swiper-slide1").remove();
})
$(`#btn2`).click(function(){
mySwiper.updateSlides();
})
</script>mySwiper.updateProgress()
這個方法會重新計算Swiper的progress值
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`)
mySwiper.updateProgress()
</script>mySwiper.updateSlidesClasses()
更新slides和bullets的active/prev/next類名
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination :{ el:`.swiper-pagination`,
type: `bullets`,
}
})
$(`#btn1`).click(function(){
$(".swiper-wrapper .swiper-slide1").remove();
})
$(`#btn2`).click(function(){
mySwiper.updateSlides();//更新數量
mySwiper.updateSlidesClasses();//更新類名
alert(`更新成功`);
})
</script>mySwiper.update(updateTranslate)
更新Swiper,這個方法包含了updateContainerSize/updateSlidesSize/updateProgress/updateClasses方法;可選引數:updateTranslate,預設false,設定為true則重新計算Wrapper的位移
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination : `.swiper-pagination`,
})
$(`#btn1`).click(function(){
$(".swiper-wrapper .swiper-slide1").remove();
})
$(`#btn2`).click(function(){
mySwiper.update()
alert(`更新成功`);
})
</script>mySwiper.detachEvents()
移除所有監聽事件
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
autoplay: true,
keyboard: true,
mousewheel: true,
on: {
click: function(){
alert(`你點了Swiper;`);
}
}
})
mySwiper.detachEvents(); //移除所有監聽事件
</script>mySwiper.attachEvents()
重新繫結所有監聽事件
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
autoplay: true,
on: {
click: function(){
alert(`你點了Swiper;`);
}
}
})
mySwiper.detachEvents(); //移除所有slide監聽事件
mySwiper.attachEvents();//重新繫結所有監聽事件。
</script>mySwiper.appendSlide(slides)
新增slide到slides的結尾,可以是HTML元素或slide陣列,例:
mySwiper.appendSlide(`<div class="swiper-slide">Slide 10</div>`)
mySwiper.appendSlide([ `<div class="swiper-slide">Slide 10</div>`, `<div class="swiper-slide">Slide 11</div>` ]);用法示例:
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`)
$(`#btn1`).click(function(){
mySwiper.appendSlide(`<div class="swiper-slide">這是一個新的slide</div>`); //加到Swiper的最後
})
</script>mySwiper.prependSlide(slides)
新增slide到slides的第一個位置,可以是HTML元素或slide陣列,例
mySwiper.prependSlide(`<div class="swiper-slide">Slide 0</div>`)
mySwiper.prependSlide([ `<div class="swiper-slide">Slide 1</div>`, `<div class="swiper-slide">Slide 2</div>` ]);用法示例:
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`)
mySwiper.prependSlide(`<div class="swiper-slide">這是一個新的slide</div>`); //加到Swiper的第一個
</script>mySwiper.on(callback,handler)
新增回撥函式或者事件控制程式碼
var mySwiper = new Swiper( `.swiper-container`)
mySwiper.on(`click`, function(){
//some code
})
等同於
var mySwiper = new Swiper( `.swiper-container`, {
on:{
click: function(){
//some code
}
}
})
或
$(`.swiper-container`).on(`click mousedown`, function(e) {
//some code
})用法示例:
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`)
mySwiper.on(`click`, function(){
alert(`你點了Swiper`);
})
</script>mySwiper.once(callback,handler)
新增回撥函式或事件控制程式碼,這些事件只會執行一次
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`)
mySwiper.once(`click`, function(){
alert(`你點了Swiper`);
})
</script>mySwiper.off(event,handler)
移除某個回撥/事件
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`)
mySwiper.on(`click`, function1)
mySwiper.on(`click`, function2)
function function1(){
alert(`處理器1`);
}
function function2(){
alert(`處理器2`);
}
mySwiper.off(`click`,function1)
</script>mySwiper.off(event)
移除事件的所有控制程式碼
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`)
mySwiper.on(`click`, function(){
alert(`你點了Swiper`);
})
mySwiper.on(`tap`, function(){
alert(`你觸碰了Swiper`);
})
mySwiper.off(`click`)
</script>mySwiper.setGrabCursor()
開啟滑鼠的抓手形狀,相當於開啟grabCursor
<script>
var mySwiper = new Swiper(`.swiper-container`)
$(`#btn1`).click(function(){
mySwiper.unsetGrabCursor();
})
$(`#btn2`).click(function(){
mySwiper.setGrabCursor();
})
</script>mySwiper.unsetGrabCursor()
關閉滑鼠的抓手形狀
<script>
var mySwiper = new Swiper(`.swiper-container`)
$(`#btn1`).click(function(){
mySwiper.unsetGrabCursor();
})
$(`#btn2`).click(function(){
mySwiper.setGrabCursor();
})
</script>元件
autoplay(自動切換)
autoplay
設定為true啟動自動切換,並使用預設的切換設定;型別:object/boolean,預設:false,舉例:true/object
<script>
var mySwiper = new Swiper(`.swiper-container`, {
autoplay:true,//自動切換開啟,預設停留三秒;等同於以下設定
/*autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},*/
});
</script>delay
自動切換的時間間隔,單位ms;還可以在某個slide上設定單獨的停留時間,例<div class="swiper-slide" data-swiper-autoplay="2000">;型別:number,預設:3000,舉例:5000
<script>
var mySwiper = new Swiper(`.swiper-container`, {
autoplay: {
delay: 5000,//5秒切換一次
},
});
</script>stopOnLastSlide
如果設定為true,當切換到最後一個slide時停止自動切換(loop模式下無效);型別:boolean,預設:false,舉例:true
<script>
var mySwiper = new Swiper(`.swiper-container`, {
autoplay: {
stopOnLastSlide: true,
},
});
</script>disableOnInteraction
使用者操作swiper之後是否禁止autoplay,預設為true:停止;如果設定為false,使用者操作swiper之後自動切換不會停止,每次都會重新啟動autoplay;操作包括觸碰/拖動/點選pagination等;型別:boolean,預設:true,舉例:false
<script>
var mySwiper = new Swiper(`.swiper-container`,{
autoplay: {
disableOnInteraction: false,
},
})
</script>mySwiper.autoplay.running
如果Swiper開啟了autoplay,這個值為true
<script>
var mySwiper = new Swiper(`.swiper-container`,{
autoplay:true,
})
$(`#btn1`).click(function(){
if(mySwiper.autoplay.running){
alert(`是`);
}else{
alert(`不是`);
}
})
</script>mySwiper.autoplay.start()
開始自動切換,一般用來做”Play”按鈕
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
autoplay : true,
})
$(`#btn1`).click(function(){
mySwiper.autoplay.stop();
})
$(`#btn2`).click(function(){
mySwiper.autoplay.start();
})
</script>mySwiper.autoplay.stop()
停止自動切換,一般用來製作”pause”按鈕
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
autoplay : true,
})
mySwiper.el.onmouseover = function(){ //滑鼠經過停止自動輪播
mySwiper.autoplay.stop();
}
</script>effects(切換效果)
touchAngle
允許觸發拖動的角度值,預設45度,即使觸控方向不是完全水平也能拖動slide;型別:number,預設:45,舉例:10
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
touchAngle : 10, //設定了很小的允許拖動角度（10）
})
</script>fadeEffect
fade效果引數,可選引數:crossFade;預設:false,關閉淡出;過渡時,原slide透明度為1(不淡出),過渡中的slide透明度從0->1(淡入),其他slide透明度0;可選值:true,開啟淡出;過渡時,原slide透明度從1->0(淡出),過渡中的slide透明度從0->1(淡入),其他slide透明度0;當你的slide中圖片大小不同時可以用到;型別:object
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
effect : `fade`,
fadeEffect: {
crossFade: false,
}
})
</script>cubeEffect
cube效果引數,可選值:
slideShadows:開啟slide陰影,預設true;shadow:開啟投影,預設true;shadowOffset:投影距離,預設20,單位px;shadowScale:投影縮放比例,預設0.94;引數型別:object
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
effect : `cube`,
cubeEffect: {
slideShadows: true,
shadow: true,
shadowOffset: 100,
shadowScale: 0.6
},
})
</script>coverflowEffect
coverflow是類似於蘋果將多首歌曲的封面以3D介面的形式顯示出來的方式,coverflow效果引數,可選值:
rotate:slide做3d旋轉時Y軸的旋轉角度,預設50;stretch:每個slide之間的拉伸值,越大slide靠得越緊, 預設0;depth:slide的位置深度,值越大z軸距離越遠,看起來越小,預設100;modifier:depth和rotate和stretch的倍率,相當於depthmodifier/rotatemodifier/stretch*modifier,值越大這三個引數的效果越明顯,預設1;slideShadows:開啟slide陰影,預設true;引數型別:object
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
effect : `coverflow`,
slidesPerView: 3,
centeredSlides: true,
coverflowEffect: {
rotate: 30,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows : true
},
})
</script>flipEffect
3d翻轉,有兩個引數可設定:
slideShadows:slides的陰影,預設true;limitRotation:限制最大旋轉角度為180度,預設true;引數型別:object
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
effect : `flip`,
flipEffect: {
slideShadows : true,
limitRotation : true,
}
})
</script>pagination(分頁器)
pagination
使用分頁導航;引數型別:object
<div class="swiper-pagination"></div>
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination: {
el: `.swiper-pagination`,
},
})
</script>el
分頁器容器的css選擇器或HTML標籤;分頁器等元件可以置於container之外,不同Swiper的元件應該有所區分,如#pagination1/#pagination2;引數型別:string or HTML,Element預設:null,舉例:.swiper-pagination
<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>
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination: {
el: `.swiper-pagination`,
},
})
</script>type
分頁器樣式型別,可選;”bullets”:圓點(預設),”fraction”:分式, “progressbar”:進度條,”custom”:自定義;引數型別:string,預設:bullets,舉例:fraction
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination: {
el: `.swiper-pagination`,
type: `bullets`,
//type: `fraction`,
//type : `progressbar`,
//type : `custom`,
},
})
</script>bulletElement
設定分頁器指示器(小點)的HTML標籤;引數型別:string,預設:span,舉例:li
<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>
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination: {
el: `.swiper-pagination`,
bulletElement : `li`,
},
})
</script>dynamicBullets
動態分頁器;當你的slide很多時,開啟後,分頁器小點的數量會部分隱藏;引數型別:boolean,預設:false,舉例:true
hideOnClick
預設分頁器會一直顯示,這個選項設定為true時點選Swiper會隱藏/顯示分頁器;引數型別:boolean,預設:false,舉例:true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination:{
el: `.swiper-pagination`,
hideOnClick :true,
},
})
</script>clickable
此引數設定為true時,點選分頁器的指示點分頁器會控制Swiper切換;引數型別:boolean,預設:false,舉例:true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination :{
el: `.swiper-pagination`,
clickable :true,
}
})
</script>renderBullet(index,className)
渲染分頁器小點;這個引數允許完全自定義分頁器的指示點,接受指示點索引和指示點類名作為引數;引數型別:function,預設:null
<script>
var swiper = new Swiper(`.swiper-container`, {
pagination: {
el: `.swiper-pagination`,
clickable: true,
renderBullet: function (index, className) {
return `<span class="` + className + `">` + (index + 1) + `</span>`;
},
},
});
</script>renderFraction()
自定義分式型別分頁器,當分頁器型別設定為分式時可用;引數型別:function,預設:null
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination: {
el: `.swiper-pagination`,
type: `fraction`,
renderFraction: function (currentClass, totalClass) {
return `<span class="` + currentClass + `"></span>` + ` of ` + `<span class="` + totalClass + `"></span>`;
},
},
})
</script>renderProgressbar()
自定義進度條型別分頁器,當分頁器型別設定為進度條時可用;引數型別:function,預設:null
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination: {
el: `.swiper-pagination`,
type: `progressbar`,
renderProgressbar: function (progressbarFillClass) {
return `<span class="` + progressbarFillClass + `"></span>`;
}
},
})
</script>renderCustom()
自定義特殊型別分頁器,當分頁器型別設定為自定義時可用;引數型別:function,預設:null
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination: {
el: `.swiper-pagination`,
type: `custom`,
renderCustom: function (swiper, current, total) {
return current + ` of ` + total;
}
},
})
</script>bulletClass
pagination分頁器內元素的類名;引數型別:string,預設:swiper-pagination-bullet,舉例:my-bullet
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination:{
el: `.swiper-pagination`,
bulletClass : `my-bullet`,
},
})
</script>bulletActiveClass
pagination分頁器內活動(active)元素的類名;引數型別:string,預設:swiper-pagination-bullet-active,舉例:my-bullet-active
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination:{
el: `.swiper-pagination`,
bulletActiveClass: `my-bullet-active`,
},
})
</script>modifierClass
修改以swiper-pagination-為字首的類名;引數型別:string,預設:swiper-pagination-,舉例:my-pagination-
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination:{
el: `.swiper-pagination`,
modifierClass : `my-pagination-`,
},
})
</script>currentClass
分式型別分頁器的當前索引的類名；引數型別:string,預設:swiper-pagination-current,舉例:my-pagination-current
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
})
</script>
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination:{
el: `.swiper-pagination`,
currentClass : `my-pagination-current`,
},
})
</script>totalClass
分式型別分頁器總數的類名；引數型別:string,預設:swiper-pagination-total,舉例:my-pagination-total
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination:{
el: `.swiper-pagination`,
totalClass : `my-pagination-total`,
},
})
</script>hiddenClass
分頁器隱藏時的類名;引數型別:string,預設:swiper-pagination-hidden,舉例:my-pagination-hidden
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination:{
el: `.swiper-pagination`,
hideOnClick :true,
hiddenClass : `my-pagination-hidden`,
},
})
</script>progressbarFillClass
進度條型分頁器的指示條的類名;引數型別:string,預設:swiper-pagination-progressbar,舉例:my-pagination-progressbar
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination:{
el: `.swiper-pagination`,
type:`progressbar`,
progressbarFillClass : `my-pagination-progressbar`,
},
})
</script>clickableClass
可點選的pagination的類名;引數型別:string,預設:swiper-pagination-clickable,舉例:my-pagination-clickable
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination:{
el: `.swiper-pagination`,
clickable: true,
clickableClass : `my-pagination-clickable`,
},
})
</script>mySwiper.pagination.el
獲取分頁器導航的容器元素
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
pagination: {
el: `.swiper-pagination`,
},
})
mySwiper.pagination.$el.addClass(`MyClass`); //為分頁器增加樣式
</script>mySwiper.pagination.bullets
獲取Swiper的分頁器的小點bullets的Dom7物件陣列,通過類似mySwiper.pagination.bullets[1]獲取其中某個
<script>
var mySwiper = new Swiper(`.swiper-container`,{
pagination: {
el: `.swiper-pagination`,
},
})
mySwiper.pagination.bullets.css(`background`,`#FF6600`);
</script>mySwiper.pagination.render()
渲染分頁器
mySwiper.pagination.update()
更新分頁器
navigation buttons(前進後退按鈕)
navigation
使用前進後退按鈕;引數型別:object
var mySwiper = new Swiper(`.swiper-container`, {
navigation: {
nextEl: `.swiper-button-next`,
prevEl: `.swiper-button-prev`,
},
});nextEl/prevEl
前進/後退按鈕的css選擇器或HTML元素;引數型別:string/HTMLElement,預設:null,舉例:.swiper-button-next/.swiper-button-prev
修改箭頭的顏色:除了預設的藍色箭頭外,Swiper還內建了白色和黑色兩種箭頭顏色,如需其他顏色可更改css樣式中的fill%3D`%23007aff`詳見下方程式碼示例,後退按鈕同效
<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-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
navigation: {
nextEl: `.swiper-button-next`,
prevEl: `.swiper-button-prev`,
},
})
</script>
<!-- 修改箭頭顏色示範 -->
<div class="swiper-button-next swiper-button-white"></div> <!-- 白色 -->
<div class="swiper-button-next swiper-button-black"></div> <!-- 黑色 -->
<style>
/*Swiper前進按鈕原樣式 */
.swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D`http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg`%20viewBox%3D`0%200%2027%2044`%3E%3Cpath%20d%3D`M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z`%20fill%3D`%23007aff`%2F%3E%3C%2Fsvg%3E");}
/*改變了顏色和加粗的樣式*/
.swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D`http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg`%20viewBox%3D`0%200%2027%2044`%3E%3Cpath%20d%3D`M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z`%20fill%3D`%23ffffff`%2F%3E%3C%2Fsvg%3E");}
/*Swiper後退按鈕原樣式 */
.swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D`http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg`%20viewBox%3D`0%200%2027%2044`%3E%3Cpath%20d%3D`M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z`%20fill%3D`%23007aff`%2F%3E%3C%2Fsvg%3E");}
/*改變了顏色和加粗的樣式*/
.swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D`http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg`%20viewBox%3D`0%200%2027%2044`%3E%3Cpath%20d%3D`M0%2C22L22%2C0l4.2%2C4.2L8.4%2C22l17.8%2C17.8L22%2C44L0%2C22z`%20fill%3D`%23ff6600`%2F%3E%3C%2Fsvg%3E");}
</style>hideOnClick
點選slide時顯示/隱藏按鈕;引數型別:boolean,預設:false,舉例:true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
navigation: {
nextEl: `.swiper-button-next`,
prevEl: `.swiper-button-prev`,
hideOnClick: true,
},
})
</script>disabledClass
前進後退按鈕不可用時的類名;引數型別:string,預設:swiper-button-disabled,舉例:my-button-disabled
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
navigation: {
nextEl: `.swiper-button-next`,
prevEl: `.swiper-button-prev`,
disabledClass: `my-button-disabled`,
},
})
</script>hiddenClass
按鈕隱藏時的Class;引數型別:string,預設:swiper-button-hidden,舉例:my-button-hidden
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
navigation: {
nextEl: `.swiper-button-next`,
prevEl: `.swiper-button-prev`,
hideOnClick: true,
hiddenClass: `my-button-hidden`,
},
})
</script>mySwiper.navigation.nextEl/mySwiper.navigation.prevEl
獲取前進/後退按鈕的HTML元素,通過$prevEl獲取DOM7
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
navigation: {
nextEl: `.swiper-button-next`,
prevEl: `.swiper-button-prev`,
},
on: {
slideChange: function(){
if(this.isEnd){ //滑到最後一個Slide時隱藏前進按鈕
this.navigation.$nextEl.css(`display`,`none`);
}else{
this.navigation.$nextEl.css(`display`,`block`);
};
if(this.isBeginning){ //滑到第一個Slide時隱藏後退按鈕
this.navigation.$prevEl.css(`display`,`none`);
}else{
this.navigation.$prevEl.css(`display`,`block`);
}
},
},
})
</script>mySwiper.navigation.update()
更新前進後退導航按鈕
var mySwiper = new Swiper(`.swiper-container`, {
navigation: {
nextEl: `.swiper-button-next`,
prevEl: `.swiper-button-prev`,
},
});
mySwiper.navigation.update();scollbar(滾動條)
scrollbar
為Swiper增加滾動條;引數型別:object
<script type="text/javascript">
var mySwiper = new Swiper(`.swiper-container`,{
scrollbar: {
el: `.swiper-scrollbar`,
},
});
</script>el
Scrollbar容器的css選擇器或HTML元素;引數型別:string/HTMLElement,預設:null,舉例:.swiper-scrollbar
<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-scrollbar"></div>
</div>
<script type="text/javascript">
var mySwiper = new Swiper(`.swiper-container`,{
scrollbar: {
el: `.swiper-scrollbar`,
},
});
</script>hide
滾動條是否自動隱藏,預設:false,不會自動隱藏;引數型別:boolean,預設:true,舉例:false
<script type="text/javascript">
var mySwiper = new Swiper(`.swiper-container`,{
scrollbar: {
el: `.swiper-scrollbar`,
hide: true,
},
});
</script>draggable
該引數設定為true時允許拖動滾動條;引數型別:boolean,預設:false,舉例:true
<script type="text/javascript">
var mySwiper = new Swiper(`.swiper-container`,{
scrollbar: {
el: `.swiper-scrollbar`,
draggable: true,
},
});
</script>snapOnRelease
如果設定為false,釋放滾動條時slide不會自動貼合;引數型別:boolean,預設:true,舉例:false
<script type="text/javascript">
var mySwiper = new Swiper(`.swiper-container`,{
scrollbar: {
el: `.swiper-scrollbar`,
draggable: true,
snapOnRelease: false,
},
});
</script>dragSize
設定滾動條指示的尺寸;預設`auto`:自動,或者設定num(px);引數型別:string/number,舉例:30
<script type="text/javascript">
var mySwiper = new Swiper(`.swiper-container`,{
scrollbar: {
el: `.swiper-scrollbar`,
dragSize: 30,
},
});
</script>mySwiper.scrollbar.el
獲取滾動條的HTML元素,還可通過$el獲取DOM7
<script type="text/javascript">
$(`.swiper-scrollbar`).html(``);
var mySwiper = new Swiper(`.swiper-container`,{
scrollbar: {
el: `.swiper-scrollbar`,
},
});
mySwiper.scrollbar.$el.css(`height`,`15px`);
</script>mySwiper.scrollbar.dragEl
獲取滾動條指示條的HTML元素,還可通過$dragEl獲取DOM7
<script type="text/javascript">
var mySwiper = new Swiper(`.swiper-container`,{
scrollbar: {
el: `.swiper-scrollbar`,
},
});
mySwiper.scrollbar.$dragEl.css(`background`,`#ff6600`);
</script>mySwiper.scrollbar.updateSize()
更新滾動條
<script type="text/javascript">
var mySwiper = new Swiper(`.swiper-container`,{
scrollbar: {
el: `.swiper-scrollbar`,
},
});
mySwiper.scrollbar.updateSize();
</script>keyboard(鍵盤)
keyboard
是否開啟鍵盤控制Swiper切換;設定為true時,能使用鍵盤方向鍵控制slide滑動;引數型別:boolean,預設:false,舉例:true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
keyboard : true,
})
</script>mySwiper.keyboard.enabled
獲取鍵盤狀態
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
keyboard : true,
})
alert(mySwiper.keyboard.enabled);
</script>mySwiper.keyboard.disable()/mySwiper.keyboard.enable()
禁止/開啟鍵盤控制
keyPress
在允許鍵盤控制狀態下,按鍵盤時會觸發這個函式
<script>
var mySwiper = new Swiper(`.swiper-container`,{
keyboard: true,
on:{
keyPress: function(event){
alert(`你按了鍵盤`+event);
},
},
})
</script>mousewheel(滑鼠)
mousewheel
開啟滑鼠滾輪控制Swiper切換,可設定滑鼠選項,或true使用預設值;引數型別:object/boolean,預設:false,舉例:true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`, {
mousewheel: true,
});
</script>forceToAxis
當值為true讓滑鼠滾輪固定於軸向,當水平mode時的滑鼠滾輪只有水平滾動才會起效,當垂直mode時的滑鼠滾輪只有垂直滾動才會起效,普通家用滑鼠只有垂直方向的滾動;引數型別:boolean,預設:false,舉例:true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
mousewheel: {
forceToAxis: true,
}
})
</script>releaseOnEdges
如果開啟這個引數,當Swiper處於邊緣位置時(第一個或最後一個slide),Swiper釋放滑鼠滾輪事件,滑鼠可以控制頁面滾動;引數型別:boolean,預設:false,舉例:true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
mousewheel: {
releaseOnEdges: true,
}
})
</script>invert
這個引數會使滑鼠滾輪控制方向反轉;引數型別:boolean,預設:false,舉例:true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
mousewheel: {
invert: true,
},
})
</script>sensitivity
滑鼠滾輪的靈敏度,值越大滑鼠滾輪滾動時swiper位移越大;引數型別:number,預設:1,舉例:0.1
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
freeMode: true,
mousewheel: {
sensitivity : 0.1,
},
})
</script>eventsTarged
滑鼠滾輪事件的接收目標(handle),可以是css選擇器或者HTML元素;引數型別:string/HTMLElement,預設:container,舉例:#my-handle
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
mousewheel: {
eventsTarged: `#my-handle`,
}
})
</script>mySwiper.mousewheel.enabled
獲取滑鼠控制狀態,true/false
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
mousewheels: true,
})
alert(mySwiper.mousewheel.enabled);
</script>mySwiper.mousewheel.enable()/mySwiper.mousewheel.disable()
開啟滑鼠滑輪控制/禁止滑鼠滑輪控制
<script>
var mySwiper = new Swiper(`.swiper-container`,{
mousewheel: true,
})
$(`#btn1`).click(function(){
mySwiper.mousewheel.disable(); //禁止滑鼠滑輪控制
})
$(`#btn2`).click(function(){
mySwiper.mousewheel.enable(); //開啟滑鼠滑輪控制
})
</script>lazy loading(延遲載入)
lazy
設為true開啟圖片延遲載入預設值,使preloadImages無效,或者設定延遲載入選項
圖片延遲載入:需要將圖片img標籤的src改寫成data-src,並且增加類名swiper-lazy;背景圖延遲載入:載體增加屬性data-background,並且增加類名swiper-lazy,還可以加一個預載入<div class="swiper-lazy-preloader"></div>或者白色的<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
當設定了slidesPerView:`auto`或slidesPerView>1,還需要開啟watchSlidesVisibility;引數型別:object/boolean,預設:false,舉例:true
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"> <!-- 延遲載入圖片的結構 -->
<img src="https://segmentfault.compath/to/picture-1.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide"> <!-- 使用srscet的延遲載入圖片的結構(注：2x,2倍解析度如retina螢幕時載入)-->
<img src="https://segmentfault.compath/to/logo-small.png" data-srcset="path/logo/logo-large.png 2x" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide"> <!-- 延遲載入背景圖的結構 -->
<div data-background="path/to/picture-2.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
</div>
<div data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy"> <!-- slide的背景延遲載入 -->
<div class="swiper-lazy-preloader"></div>
</div>
</div>
</div>
<script>
var mySwiper = new Swiper(`.swiper-container`, {
lazy: {
loadPrevNext: true,
},
});
</script>loadPrevNext
設定為true允許將延遲載入應用到最接近的slide的圖片(前一個和後一個slide);引數型別:boolean,預設:false,舉例:true
<script>
var mySwiper = new Swiper(`.swiper-container`,{
lazy: {
loadPrevNext: true,
},
})
</script>loadPrevNextAmount
設定在延遲載入圖片時提前多少個slide,個數不可少於slidesPerView的數量;預設為1,提前1個slide載入圖片,例如切換到第三個slide時載入第四個slide裡面的圖片;引數型別:number,預設:1,舉例:2
<script>
var mySwiper = new Swiper(`.swiper-container`,{
lazy: {
loadPrevNext: true,
loadPrevNextAmount: 2,
},
})
</script>loadOnTransitionStart
預設當過渡到slide後開始載入圖片,如果想在過渡一開始就載入設定為true;引數型別:boolean,預設:false,舉例:true
<script>
var mySwiper = new Swiper(`.swiper-container`,{
lazy: {
loadOnTransitionStart: true,
},
})
</script>elementClass
延遲載入的圖片的類名;引數型別:string,預設:swiper-lazy,舉例:my-lazy
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
lazy: {
elementClass : `my-lazy`,
},
})
</script>loadingClass
正在進行懶載入的元素的類名;引數型別:string,預設:swiper-lazy-loading,舉例:my-lazy-loading
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
lazy: {
loadingClass: `my-lazy-loading`,
},
})
</script>loadedClass
懶載入完成的元素的類名;引數型別:string,預設:swiper-lazy-loaded,舉例:my-lazy-loaded
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
lazy: {
loadedClass: `my-lazy-loaded`,
},
})
</script>preloaderClass
延時載入時預載入元素(preloader)的類名;引數型別:string,預設:swiper-lazy-preloader,舉例:my-lazy-preloader
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
lazy: {
preloaderClass: `my-lazy-preloader`,
},
})
</script>mySwiper.lazy.load()
載入設定了延遲載入的圖片;引數型別:function
mySwiper.lazy.loadInSlide(index)
根據slide的索引載入圖片;引數型別:function
<script>
var mySwiper = new Swiper(`.swiper-container`, {
lazy: true,
});
mySwiper.lazy.loadInSlide(2);//載入第二個Slide中的圖片
</script>lazyImageLoad(slideEl, imageEl)
回撥函式,圖片延遲載入開始時執行,slide中每有一張圖片被延遲載入就執行一次,接受延遲載入的slide,延遲載入的img作為引數(可選)
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
lazyImageLoad: function(slide, image){
alert(`延遲載入圖片`);
console.log(slide);//哪個slide裡面的圖片在載入
console.log(image);//哪個圖片在載入
}
}
})
</script>lazyImageReady(slideEl, imageEl)
回撥函式,圖片延遲載入結束時執行,slide中每有一張圖片被延遲載入就執行一次,接受延遲載入的slide,延遲載入的img作為引數(可選);引數型別:function
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
on:{
lazyImageReady: function(slide, image){
alert(`圖片延遲載入了`);
console.log(slide);//哪個slide裡面的圖片載入了
console.log(image);//哪個圖片載入了
}
}
})
</script>zoom(調焦)
zoom
開啟焦距功能:雙擊slide會放大/縮小,並且在手機端可雙指觸控縮放,可設定縮放選項或設為true使用預設值;需要在slide中增加類名swiper-zoom-container,結構如下:
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="path/to/image">
</div>
</div>引數型別:booleanobject/boolean,舉例:true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
zoom : true,
})
</script>maxRatio/minRatio
最大縮放焦距(放大倍率)/最小縮放焦距(縮小倍率);如果要在單個slide上設定,可以使用data-swiper-zoom;引數型別:number,預設:3/1,舉例:5/2
<div class="swiper-zoom-container" data-swiper-zoom="3">
<img src="path/to/image1.jpg">
</div>
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
zoom: {
maxRatio: 5,
minRatio: 2,
},
})
</script>toggle
是否允許雙擊縮放;設定為false,不允許雙擊縮放,只允許手機端觸控縮放;引數型別:boolean,預設:true,舉例:false
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
zoom: {
toggle: false,
},
})
</script>containerClass
zoom container的類名;引數型別:string,預設:swiper-zoom-container,舉例:my-zoom-container
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
zoom: {
containerClass: `my-zoom-container`,
},
})
</script>mySwiper.zoom.enabled
判斷zoom是否開啟
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
zoom : true,
})
console.log(mySwiper.zoom.enabled);
</script>mySwiper.zoom.scale
獲取當前縮放的圖片的比例
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
zoom: true,
})
console.log(mySwiper.zoom.scale);
</script>mySwiper.zoom.enable()/mySwiper.zoom.disable()
開啟zoom/禁止zoom模式
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`);
mySwiper.zoom.enable();
</script>
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
zoom : true,
})
mySwiper.zoom.disable();
</script>mySwiper.zoom.toggle()
zoom模式下,當前的圖片放大/縮小
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
zoom: true,
})
$(`#btn1`).click(function(){
mySwiper.zoom.toggle();
})
</script>mySwiper.zoom.in()/mySwiper.zoom.out()
zoom模式下,當前的圖片放大/縮小
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
zoom: true,
})
$(`#btn1`).click(function(){
mySwiper.zoom.in();
});
$(`#btn2`).click(function(){
mySwiper.zoom.out();
})
</script>controller(雙向控制)
controller
設定雙向控制的引數,或者true使用預設設定;引數型別:object/boolean,舉例:true
var mySwiper = new Swiper(`.swiper-container`, {
controller: {
control: [swiper1,swiper2],
inverse: true,
by: `slide`,
},
//controller: true,
});control
設定為另外一個Swiper例項開始控制該Swiper;引數型別:[Swiper Instance],預設:null,舉例:myswiper
<script>
var Swiper1 = new Swiper(`#swiper-container1`);
var Swiper2 = new Swiper(`#swiper-container2`,{
controller: {
control: Swiper1, //控制Swiper1
},
})
Swiper1.controller.control = Swiper2;//Swiper1控制Swiper2，需要在Swiper2初始化後
Swiper2.controller.control = Swiper1;//Swiper2控制Swiper1，需要在Swiper1初始化後
var Swiper3 = new Swiper(`#swiper-container3`,{
controller:{
control: [Swiper1, Swiper2],//控制前面兩個Swiper
},
})
</script>inverse
設定為true時控制方向倒轉;引數型別:boolean,預設:false,舉例:true
<script>
var Swiper2 = new Swiper(`#swiper-container2`,{
initialSlide :2,
})
var Swiper1 = new Swiper(`#swiper-container1`,{
controller: {
control: Swiper2,
inverse :true,
},
})
</script>By
設定Swiper相互控制時的控制方式,當兩個swiper的slide數量不一致時可用;預設為`slide`,自身切換一個slide時被控制方也切換一個slide;可選:`container`,按自身slide在container中的位置比例進行控制
例:有4個slide的swiper1控制有7個slide的swiper2,設定`slide`,swiper1的1,2,3,4對應控制的swiper2為1,2,3,7;設定by:`container`,swiper1的1,2,3,4對應控制的swiper2為1,3,5,7;引數型別:string,預設:slide,舉例:container
<script>
var Swiper2 = new Swiper(`#swiper-container2`);
var Swiper1 = new Swiper(`#swiper-container1`,{
controller:{
control: Swiper2,
by: `container`,
},
})
</script>Thumbs(縮圖)
thumbs
thumbs元件專門用於製作帶縮圖的swiper，比使用controller元件更為簡便;引數型別：object
swiper
設定作為縮圖的swiper物件，型別：object Swiper。有兩種方式：
1.先初始化縮圖Swiper，再初始化banner Swiper
var thumbsSwiper = new Swiper(`.swiper-container-thumbs`, {
slidesPerView: 5,
});
var mySwiper = new Swiper(`.swiper-container`, {
...
thumbs: {
swiper: thumbsSwiper
}
});2.初始化banner Swiper的時候初始化縮圖Swiper
var mySwiper = new Swiper(`.swiper-container`, {
...
thumbs: {
swiper: {
el: `.swiper-container-thumbs`,
slidesPerView: 5,
...
}
}
});slideThumbActiveClass
設定縮圖Swiper的活動塊的附加類名。banner Swiper切換時，縮圖Swiper的原活動塊類名swiper-slide-active不會切換，而縮圖Swiper的附加類名swiper-slide-thumb-active會切換。引數型別：string，預設：swiper-slide-thumb-active
thumbsContainerClass
設定縮圖Swiper的container的附加類名。引數型別：string，預設：swiper-container-thumbs
<script>
var mySwiper = new Swiper(`.swiper-container`, {
...
thumbs: {
swiper: {
el: `.swiper-container-thumbs`,
slidesPerView: 5,
...
},
thumbsContainerClass: `my-container-thumbs`,
}
});
</script>mySwiper.thumbs.swiper
獲取縮圖Swiper的例項
virtual slides(虛擬slide)
virtual
開啟虛擬Slide功能,可設定選項或true使用預設值,虛擬Slide只渲染當前slide和前後的slide;引數型別:object/boolean
var mySwiper = new Swiper(`.swiper-container`, {
virtual: {
slides: (function () {
var slides = [];
for (var i = 0; i < 600; i += 1) {
slides.push(`Slide ` + (i + 1));
}
return slides;
}()),
},
});slides
需要新增的虛擬slide;引數型別:array,預設:[]
<script>
var swiper = new Swiper(`.swiper-container`, {
virtual: {
slides: [`Slide 1`, `Slide 2`, `Slide 3`, `Slide 4`, `Slide 5`],
},
});
</script>cache
DOM快取,預設開啟;引數型別:boolean,預設:true,舉例:false
<script>
var swiper = new Swiper(`.swiper-container`, {
virtual: {
slides: [`a`,`b`,`c`],
cache: false, //關閉快取
},
});
</script>renderSlide
渲染虛擬Slide,必須返回一個slide的HTML結構;引數型別:function,預設:null
<script>
var swiper = new Swiper(`.swiper-container`, {
virtual: {
slides: [`Slide 1`, `Slide 2`, `Slide 3`, `Slide 4`, `Slide 5`],
renderSlide:function(slide, index){
return `<div class="swiper-slide">some content`+index+slide+`</div>`;
},
},
});
</script>renderExternal
渲染外觀;引數型別:function,預設:null
<script>
var swiper = new Swiper(`.swiper-container`, {
virtual: {
renderExternal:function(data){},
},
});
</script>mySwiper.virtual.cache
獲取快取的(正在渲染的)Slide的HTML
<script>
var mySwiper = new Swiper(`.swiper-container`, {
virtual: {
slides: [`Slide 1`, `Slide 2`, `Slide 3`, `Slide 4`, `Slide 5`],
},
});
console.log(mySwiper.virtual.cache);
</script>mySwiper.virtual.from
獲取正在渲染的第一個虛擬Slide的序號
<script>
var mySwiper = new Swiper(`.swiper-container`, {
virtual: {
slides: [`Slide 1`, `Slide 2`, `Slide 3`, `Slide 4`, `Slide 5`],
},
});
console.log(mySwiper.virtual.from);
</script>mySwiper.virtual.to
獲取正在渲染的最後一個虛擬Slide的序號
<script>
var mySwiper = new Swiper(`.swiper-container`, {
virtual: {
slides: [`Slide 1`, `Slide 2`, `Slide 3`, `Slide 4`, `Slide 5`],
},
});
console.log(mySwiper.virtual.to);
</script>mySwiper.virtual.slides
獲取全部的虛擬slide的HTML
<script>
var mySwiper = new Swiper(`.swiper-container`, {
virtual: {
slides: [`Slide 1`, `Slide 2`, `Slide 3`, `Slide 4`, `Slide 5`],
},
});
console.log(mySwiper.virtual.slides);
</script>mySwiper.virtual.appendSlide(slide)/mySwiper.virtual.prependSlide(slide)
在虛擬的Slide中新增Slide(在最後)/(在最前)
<script>
var mySwiper = new Swiper(`.swiper-container`, {
virtual: {
slides: [`Slide 1`, `Slide 2`, `Slide 3`, `Slide 4`, `Slide 5`],
},
});
mySwiper.virtual.prependSlide(`<div class="swiper-slide">My Slide</div>`);
</script>mySwiper.virtual.update()
更新虛擬Slide的狀態
<script>
var mySwiper = new Swiper(`.swiper-container`, {
virtual: {
slides: [`Slide 1`, `Slide 2`, `Slide 3`, `Slide 4`, `Slide 5`],
},
});
mySwiper.virtual.update();
</script>hash navigation(錨導航)
hashNavigation
設定雜湊導航選項,或true使用預設值;為每個slide增加雜湊導航(有點像錨連結),還需要在每個slide處增加data-hash屬性,這樣當swiper切換時頁面url就會加上這個屬性的值了,也可以通過進入頁面時修改頁面url讓swiper在初始化時切換到指定的slide,可以直接跳轉到指定的slide;比如這樣:直接跳到第三個slide;如果需要瀏覽器的前進後退按鈕配合控制,需要加上watchState;引數型別:boolean,預設:false,舉例:true
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-hash="slide1">
slider1</div>
<div class="swiper-slide" data-hash="slide2">
slider2</div>
<div class="swiper-slide" data-hash="slide3">
slider3</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
hashNavigation: true,
})
</script>watchState
開啟後觀察瀏覽器視窗的的hashchange狀態變化,可通過瀏覽器歷史記錄(頁面前進後退按鈕)或者URL的錨連結改變控制slide切換;引數型別:boolean,預設:false,舉例:true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
hashNavigation: {
watchState: true,
},
})
</script>replaceState
使用replaceState(window.history.replaceState)代替hashnav的hash(document.location.hash);引數型別:boolean,預設:false,舉例:true
<script language="javascript">
var mySwiper = new Swiper(`.swiper-container`,{
hashNavigation: {
replaceState: true,
},
})
</script>history navigation(歷史導航)
history
設為history導航選項,或者true使用預設值,開啟history導航;在slide切換時無重新整理更換URL和瀏覽器的history.state(pushState),這樣每個slide都會擁有一個自己的URL;使用history還必需在slide上增加一個屬性data-history,例<div class="swiper-slide" data-history="slide1"></div>;開啟history會取消hashnav;引數型別:object/boolean,舉例:true
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-history="slide1">Slide 1</div>
<div class="swiper-slide" data-history="slide2">Slide 2</div>
<div class="swiper-slide" data-history="slide3">Slide 3</div>
</div>
</div>
<script>
var swiper = new Swiper(`.swiper-container`, {
history: true,
});
</script>replaceState
使用history.replaceState方法替換history.pushState方法;引數型別:boolean,預設:false,舉例:true
<script>
var swiper = new Swiper(`.swiper-container`, {
history: {
replaceState: true,
},
});
</script>key
URL中的接續詞;引數型別:string,預設:slides,舉例:my
<script>
var swiper = new Swiper(`.swiper-container`, {
history: {
key: `my`,
},
});
</script>Swiper特色功能
1:1觸控運動
Swiper預設提供1:1的觸控距離,當然,這個比率是可以設定的(通過修改touchRatio)
觸控模仿
這個功能對於開發桌面網站會很有用;簡單來說,就是因為Swiper能夠讓滑鼠事件表現得像觸屏事件(點選以及拖曳滑塊)
水平/垂直方向
Swiper運動主要有兩種模式,horizontal(水平滑動)以及vertical(垂直運動的滑動)
自由模式(Free Mode)
這種模式下能夠讓slides無需定位,就像通常的滑動條
旋轉調整(rotation/resize)
Swipe在移動裝置旋轉後能自適應尺寸,可以自動根據裝置旋轉和縮放
響應比例
能使用百分比的寬高定義slides,為移動端提供不同的解決方案
抵抗反彈(resistant bounds)
Swiper能夠提供一種機制,就是當滑動滑塊超過最左以及最右(最上或最下)的位置時觸發的一種抵禦機制
內建分頁控制
Swiper能夠快速生成內建的分頁器(pagination),指定html某一標籤為pagination,Swiper就能做很多東西了
自動播放
只用設定延遲時間,Swiper就會自動地輪播slides直到你觸碰該滑塊(touch)為止
迴圈模式(Loop mode)
該種模式下,你能夠無限滑動滑塊,到最後一個之後會跳轉回第一個
巢狀Swiper
能夠將Swiper巢狀入各種不同的Swiper的slide裡,例如垂直的或水平的
滑動阻止
簡單來說,就是隻能使用一種模式,水平或者垂直滑動
任意HTML標籤
可以將任意內容放到slide裡,不止僅限於影像
硬體加速
swiper使用硬體加速技術(如果該移動裝置支援的話)能夠得到良好流暢的動畫效果以及優美的外觀,尤其是在IOS裝置裡
配置靈活
Swiper在初始化的時候能夠設定多個引數以便讓其更加的靈活,例如滑動的速度/方向/模式等
良好的相容性
Swiper支援移動端的Safari/Android 2.1+/windows Phone 8,以及PC端的Chrome/Firefox/IE7-10/Opera
獨立性
Swiper不依賴像jQuery那樣的js類庫,因此能夠讓Swiper更加的小型以及快速
超輕量級
壓縮後僅僅10KB左右
原生要素(native momentum)
有不少的原生東西提供給Swiper
旋轉模式(Carousel mode)
Swiper能夠讓你在slides父容器下設定你所需要展示的slides數量
Swiper Animate
Swiper Animate是Swiper中文網提供的用於在Swiper內快速製作CSS3動畫效果的小外掛，適用於Swiper2.x、Swiper3.x和Swiper4.x。此外掛不適用於loop模式
- 使用Swiper Animate需要先載入swiper.animate.min.js和animate.min.css
<head>
<link rel="stylesheet" href="path/to/swiper.min.css">
<link rel="stylesheet" href="path/to/animate.min.css">
<script src="path/to/swiper.min.js"></script>
<script src="path/to/swiper.animate.min.js"></script>
</head> - 初始化時隱藏元素並在需要的時刻開始動畫
<script>
//Swiper4.x
var mySwiper = new Swiper (`.swiper-container`, {
on:{
init: function(){
swiperAnimateCache(this); //隱藏動畫元素
swiperAnimate(this); //初始化完成開始動畫
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每個slide切換結束時也執行當前slide動畫
//this.slides.eq(this.activeIndex).find(`.ani`).removeClass(`ani`); 動畫只展現一次，去除ani類名
}
}
})
</script> - 在需要運動的元素上面增加類名ani，和其他的類似外掛相同，Swiper Animate需要指定幾個引數:
swiper-animate-effect：切換效果，例如 fadeInUp
swiper-animate-duration：可選，動畫持續時間（單位秒），例如 0.5s
swiper-animate-delay：可選，動畫延遲時間（單位秒），例如 0.3s如果以上這些效果不能滿足你的需求，你可以仿照animate.css的格式製作一些其他效果，加到你自己的css檔案。其他引數：transition-timing-function
Swiper4.x使用方法
獲取Swiper
在官網下載原始碼:http://www.swiper.com.cn/download/index.html;只需要下載swiper.min.js/swiper.min.css即可使用;swiper是獨立的,不依賴任何js框架
構建網頁,引入相關檔案
新建html頁面,如果是移動端看的話,需要在頁面頭部插入視口說明
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">首先載入外掛,需要用到的檔案有swiper.min.js/swiper.min.css
<link href="http://cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/Swiper/3.3.1/js/swiper.min.js"></script>寫出你要分幾屏的html結構,並配上樣式
在頁面裡寫出你要分幾屏的html程式碼,並把他們都套在一個層內,假設你要分3屏
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide p1">Slide 1</div>
<div class="swiper-slide p2">Slide 2</div>
<div class="swiper-slide p3">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>
<!-- 導航等元件可以放在container之外 -->
</div>配上樣式
<style type="text/css">
html,body { width:100%; height:100%;} /*這行設定能實現單層滿屏顯示*/
.swiper-container { width: 100%; height: 100%;} /*這行設定能實現單層滿屏顯示,Swiper大小不要也行*/
.p1 { background-color:#E13437;} /*p1層的背景色*/
.p2 { background-color:#9C2ACE;} /*p2層的背景色*/
.p3 { background-color:#317AC7;} /*p3層的背景色*/
</style>寫入JavaScript啟動程式碼
預設是橫向滑動,如果需要豎屏滑動,需加入direction:`vertical`引數
<script>
window.onload = function() {
var mySwiper = new Swiper (`.swiper-container`, {
direction: `vertical`,
loop: true,
pagination: { // 如果需要分頁器
el: `.swiper-pagination`,
},
navigation: { // 如果需要前進後退按鈕
nextEl: `.swiper-button-next`,
prevEl: `.swiper-button-prev`,
},
scrollbar: { // 如果需要滾動條
el: `.swiper-scrollbar`,
},
pagination: `.swiper-pagination`, // 如果需要分頁器
nextButton: `.swiper-button-next`, // 如果需要前進後退按鈕
prevButton: `.swiper-button-prev`,
scrollbar: `.swiper-scrollbar`, // 如果需要滾動條
})
}
</script>如果需要多個swiper巢狀,則要改動js程式碼
<script>
var swiperH = new Swiper(`.swiper-container-h`, {
pagination: `.swiper-pagination-h`,
paginationClickable: true,
spaceBetween: 50
});
var swiperV = new Swiper(`.swiper-container-v`, {
pagination: `.swiper-pagination-v`,
paginationClickable: true,
direction: `vertical`,
spaceBetween: 50
});
</script>感悟：你現在最在意的那些事情很可能只是你若干年後的根本不記得
相關文章
- Swipe 移動端滑動外掛使用詳解
- 移動端輪播圖滑動外掛-swipe
- 移動端swiper嵌iframe無法滑動的解決方案
- fastclick外掛的使用--移動端vue專案開發(vue常用外掛)ASTVue
- 移動Web觸控與運動解決方案AlloyTouch開源啦Web
- 移動端仿ios日曆外掛iOS
- 移動端左滑右滑元件元件
- 小程式禁止swiper滑動
- web 移動端 橫向滾動的阻尼感很強，滑動不靈敏Web
- 移動端小白，30天掌握Flutter雙端外掛開發-上Flutter
- 實現基於React的移動端Swiper元件React元件
- Lesktop開源IM移動端：接入LayIM移動端UIUI
- BetterScroll：可能是目前最好用的移動端滾動外掛
- 分享一款免費開源的線上文件管理外掛
- 微信小程式swiper實現 句子控app首頁滑動卡片微信小程式APP
- 8個強大的jQuery圖片滑塊動畫外掛jQuery動畫
- YonBuilder移動開發-移動原生外掛開發環境配置教程UI移動開發開發環境
- 移動端小白，30天掌握Flutter雙端外掛開發-下(iOS篇)FlutteriOS
- 基於 Vue 的移動端圖片檢視外掛.Vue
- 讓網頁舞動起來！25個免費的視差滾動外掛網頁
- H5觸控事件判斷滑動方向H5事件
- [外掛擴充套件]移動端多圖片上傳外掛uploadimages套件
- [外掛擴充套件]轉向移動端ToMobile套件
- picker-extend 移動端級聯選擇外掛
- react實現移動端PDF線上預覽外掛React
- 移動端小白，30天掌握Flutter雙端外掛開發-中(Android篇)FlutterAndroid
- 移動端觸屏拖動頁面滾動效果
- jquery的50個免費外掛jQuery
- 平臺型+移動端是免費OA系統成功的保障
- 輕量級滑塊Swiper外掛釋出（僅3kb）
- vue移動端側滑皮膚元件Vue元件
- 原生 js 實現移動端 Touch 滑動反彈JS
- BetterScroll：可能是目前最好用的移動端滾動外掛(原始碼分析)原始碼
- 基於React的全屏滑動外掛react-fullslipReact
- 爬蟲界的福利--touchRobot，機器模擬觸碰滑動（已開源）爬蟲
- 如何用原生js來寫一個swiper滑塊外掛（上）原理JS
- iSlider移動端原生滑動元件原始碼解讀IDE元件原始碼
- Tips-移動端滑動固頂效果(position: sticky)