天天看點
傳回

移動端觸摸滑動插件Swiper移動端觸摸滑動插件Swiper

移動端觸摸滑動插件Swiper

04/02/2015

一、了解Swiper

目前移動端項目一般都需要具有觸屏焦點圖的效果，如果你也需要實作這一功能的話，Swiper是一個不錯的選擇。

1、他不需要加載任何公共庫（如jQuery）即可運作，這保證了Swiper的輕量和運作速度。Swiper也可以在加載了公共庫的環境下安全的動行，如jQuery，Zepto，jQuery Moblie等。

2、Swiper預設的觸摸比例為1:1，你可以通過修改Swiper的設定來改變這個比例。

3、Swiper 增加了選項可以開啟 Mutation Observer,有了這個功能Swiper可以在你動态改變Dom或Swiper的樣式時自動重新初始化并計算所需的元素。

4、Swiper擁有豐富的API，他允許你建立自己獨特的分頁器、導航、視差滾動、或其他精彩的效果。

5、Swiper是唯一一個支援100%RTL布局的滑動插件。

6、Swiper允許多行Slides布局，這樣每行的slide就會較少。

7、增加了三種新的過渡效果：淡入、3D方塊、3D流。

8、現在Swiper可以用來控制其他的Swiper，甚至可以同時控制。

9、Swiper帶有所有常用的導航控制器，包括分頁器，切換箭頭，滾動條。

10、Swiper使用流行的flexbox布局，這樣就解決了很多計算尺寸方面的問題。這種布局也允許用CSS來設定Slides。

11、你可以在Swiper初始化的時候設定slide的顯示，包括每行、每列、每組數量以及他們的間距等。

12、Swiper支援流行的視差滾動效果，這種效果可以應用在Swiper裡任一進制素上，圖檔、文本塊、标題、背景等等。

13、Swiper懶加載延遲了不活動/不可見的圖檔加載，使用者滑動時才加載他們。這一特性可以使頁面加載更快并可提高Swiper的性能。

14、Swiper3還包含了所有swiper2的牛逼功能，包括自适應、滾動反彈、抵抗反彈、loop模式、嵌套Swiper。

二、使用方法

1.首先加載插件，Swiper準備了基礎測試包供你使用，測試包裡面已經包含了swiper.min.js和swiper.min.css檔案。

<!DOCTYPE html><html><head>

…

<link rel=”stylesheet” href=”path/to/swiper.min.css”></head><body>

…

<script src=”path/to/swiper.min.js”></script></body></html>

如果你的頁面加載了jQuery.js或者zepto.js，你可以選擇使用更輕便的swiper.jquery.min.js。

<!DOCTYPE html><html><head>

…

<link rel=”stylesheet” href=”path/to/swiper.min.css”></head><body>

…

<script src=”path/to/jquery.js”></script>

<script src=”path/to/swiper.jquery.min.js”></script></body></html>

2.HTML内容。

<div class=”swiper-container”>

<div class=”swiper-wrapper”>

<div class=”swiper-slide”>Slide 1</div>

<div class=”swiper-slide”>Slide 2</div>

<div class=”swiper-slide”>Slide 3</div>

</div>

<!– 如果需要分頁器 –>

<div class=”swiper-pagination”></div>

<!– 如果需要導航按鈕 –>

<div class=”swiper-button-prev”></div>

<div class=”swiper-button-next”></div>

<!– 如果需要滾動條 –>

<div class=”swiper-scrollbar”></div></div>

3.你可能想要給Swiper定義一個大小。

.swiper-container {

width: 600px;

height: 300px;}

4.初始化Swiper：最好是挨着</body>标簽

<script>

var mySwiper = new Swiper (‘.swiper-container’, {

direction: ’vertical’,

loop: true,

// 如果需要分頁器

pagination: ’.swiper-pagination’,

// 如果需要前進後退按鈕

nextButton: ’.swiper-button-next’,

prevButton: ’.swiper-button-prev’,

// 如果需要滾動條

scrollbar: ’.swiper-scrollbar’,

})

</script></body>

如果不能寫在HTML内容的後面，則需要在頁面加載完成後再初始化。

<script type=”text/javascript”>

window.onload = function() {

…

}

</script>

或者這樣（Jquery和Zepto）

<script type=”text/javascript”>

$(document).ready(function () {

…

})

</script>

三、API

Parameter Type Default Description
initialSlide number 初始slide的索引
direction string ‘horizontal’ 可以是’horizontal’或’vertical’(垂直滑動)
speed number 300 滑動速度(機關ms)
setWrapperSize boolean false 開啟這個設定會在Wrapper上添加等于slides相加的寬高，在對flexbox布局的支援不是很好的浏覽器中可能需要用到。
virtualTranslate boolean false

虛拟位移。當你啟用這個參數，Swiper除了不會移動外其他的都像平時一樣運作，僅僅是不會在Wrapper上設定位移。當你想自定義一些slide切換效果時可以用。

比如我們提供的cube切換效果，當slide切換時，Wrapper的位置是固定的。
Autoplay(自動切換)
autoplay number - 自動切換的時間間隔（機關ms），不設定該參數slide不會自動切換。
autoplayDisableOnInteraction boolean true 如果設定為false，使用者操作swiper之後自動切換不會停止，每次都會重新啟動autoplay。
Progress(進度)
watchSlidesProgress boolean false 開啟這個參數來計算每個slide的progress(進展)
watchSlidesVisibility boolean false 必須先開啟watchSlidesProgress 開啟了watchSlidesVisibility，則會在每個可見slide增加一個classname
Freemode(free模式)
freeMode boolean false 設定為true時，将開啟free模式，即滑動停止後停在目前位置，而不是目前幀的位置。
freeModeMomentum boolean true 設定為true時，滑動釋放slide後仍會靠動量繼續滑動，為false時，釋放後立即停止。
freeModeMomentumRatio number 1 設定的值越大，當釋放slide時的滑動距離越大。
freeModeMomentumBounce boolean true false時禁用free模式下的動量反彈，slides通過慣性滑動到邊緣時，無法反彈。
freeModeMomentumBounceRatio number 1 值越大産生的邊界反彈效果越明顯，反彈距離越大。
Effects(切換效果)
effect string ‘slide’ 可設定為”slide”（位移切換）”fade”（淡入）”cube”（方塊）”coverflow”（3d流）。
fade object

fade: {

crossFade: false}

 fade效果參數
cube object

cube: {

slideShadows: true,

shadow: true,

shadowOffset: 20,

shadowScale: 0.94}

 cube效果參數
coverflow object

coverflow: {

rotate: 50,

stretch: 0,

depth: 100,

modifier: 1,

slideShadows : true}

 coverflow效果參數
Parallax(視差效果)
parallax boolean false 開啟視差效果
Slides grid(網格分布)
spaceBetween number slide之間的距離（機關px）
slidesPerView number or ‘auto’ 1 設定slider容器能夠同時顯示的slides數量(carousel模式)。
slidesPerColumn number 1 多行布局裡面每列的slide數量。
slidesPerColumnFill string ‘column’ 多行布局中以什麼形式填充’cloumn’和’row’
slidesPerGroup number 1 在carousel mode下定義slides的數量多少為一組。
centeredSlides boolean false 設定為true時，活動塊會居中，而不是預設狀态下的居左。
Grab Cursor(抓手光标)
grabCursor boolean false 設定為true時，滑鼠覆寫Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀
Touches(觸發)
touchRatio number 1 觸摸距離與slide滑動距離的比率。
touchAngle number 45 允許觸發拖動的角度值
simulateTouch boolean true 預設為true，Swiper接受滑鼠點選、拖動
shortSwipes boolean true 設定為false時，進行快速短距離的拖動無法觸發Swiper。
longSwipes boolean true 設定為false時，進行長時間長距離的拖動無法觸發Swiper。
longSwipesRatio number 0.5 進行longSwipes時觸發swiper所需要的最小拖動距離比例，值越大觸發Swiper所需距離越大。最大值0.5。
longSwipesMs number 300 定義longSwipes的時間（機關ms），超過則屬于longSwipes。
followFinger boolean true 如設定為false，拖動slide時它不會動，當你釋放時slide才會切換。
onlyExternal boolean false 值為true時，slide無法拖動，隻能使用擴充API函數來改變slides滑動。
threshold number 拖動的臨界值（機關為px），如果觸摸距離小于該值滑塊不會被拖動。
touchMoveStopPropagation boolean true true時阻止touchmove冒泡事件。
Touch Resistance(觸摸阻力)
resistance boolean true 值為false時将slide拖出邊緣時完全沒有抗力
resistanceRatio number 0.85 抵抗率。resistant bounds（抵抗反彈）抵抗力的大小比例。值越小抵抗越大越難将slide拖出邊緣。
Clicks(點選)
preventClicks boolean true 預設為true，當swiping時阻止意外的連結點選。
preventClicksPropagation boolean true 阻止click冒泡。拖動Swiper時阻止click事件。
slideToClickedSlide boolean false 設定為true則swiping時點選slide會過渡到這個slide。
Swiping / No swiping(禁止)
allowSwipeToPrev boolean true 設為false可禁止向左或上滑動。
allowSwipeToNext boolean true 設定為false可禁止向右或下滑動。
noSwiping boolean true 設為true時，可以在slide上增加類名’swiper-no-swiping’，使該slide無法滑動。
noSwipingClass string ‘swiper-no-swiping’ 不可拖動塊的類名，當noSwiping設定為true時，并且在slide加上此類名，slide無法拖動。
swipeHandler string / HTMLElement null CSS選擇器或者HTML元素。你隻能拖動它進行swiping。
Pagination(分頁器)
pagination string / HTMLElement null 分頁器容器的css選擇器或HTML标簽。
paginationHide boolean true true時點選Swiper的container會顯示/隐藏分頁器。
paginationClickable boolean false 值為true時，點選分頁器的訓示點時會發生Swiper。
paginationBulletRender(index, className) function null 渲染分頁器小點。這個參數允許完全自定義分頁器的訓示點。
Navigation Buttons(前進後退按鈕)
nextButton string / HTMLElement null 前進按鈕的css選擇器或HTML元素。
prevButton string / HTMLElement null 後退按鈕的css選擇器或HTML元素。
Scollbar(滾動條)
scrollbar string / HTMLElement null Scrollbar容器的css選擇器或HTML元素。
scrollbarHide boolean true 滾動條是否自動隐藏。預設：true會自動隐藏。
Keyboard / Mousewheel(鍵盤、滑鼠控制選項)
keyboardControl boolean false

是否開啟鍵盤控制Swiper切換。

設定為true時，能使用鍵盤方向鍵控制slide滑動。
mousewheelControl boolean false

是否開啟滑鼠控制Swiper切換。

設定為true時，能使用滑鼠滑輪控制slide滑動。
mousewheelForceToAxis boolean false

當值為true讓滑鼠滑輪固定于軸向。當水準mode時的滑鼠滑輪隻有水準滾動才會起效，當垂直mode時的滑鼠滑輪隻有垂直滾動才會起效。

普通家用滑鼠隻有垂直方向的滾動。
Hash Navigation(散列導航)
hashnav boolean false 如需使用散列導航（有點像錨連結）将此參數設定為true。
Images(圖檔選項)
preloadImages boolean true 預設為true，Swiper會強制加載所有圖檔。
updateOnImagesReady boolean true 當所有的内嵌圖像（img标簽）加載完成後Swiper會重新初始化。
lazyLoading boolean false 設為true開啟圖檔延遲加載，使preloadImages無效。
lazyLoadingInPrevNext boolean true 設定為true允許将延遲加載應用到最接近的slide的圖檔（前一個和後一個slide）。
lazyLoadingOnTransitionStart boolean true 預設當過渡到slide後開始加載圖檔，如果你想在過渡一開始就加載，設定為true
Loop(環路)
loop boolean false 設定為true 則開啟loop模式。loop模式：會在wrapper前後生成若幹個slides讓slides看起來是銜接的，用于無限循環切換。
loopAdditionalSlides number loop模式下會在slides前後複制若幹個slide,，前後複制的個數不會大于原總個數。
loopedSlides number null 在loop模式下使用slidesPerview:’auto’,還需使用該參數設定所要用到的loop個數。
Controller(雙向控制)
control [Swiper Instance] undefined 設定為另外一個Swiper執行個體開始控制該Swiper。
controlInverse boolean false 設定為true時控制方向倒轉。
Callbacks(回調函數)
runCallbacksOnInit boolean true 初始化時觸發 [Transition/SlideChange] [Start/End] 回調函數。這些回調函數會在下次初始化時被清除如果initialSlide不為0。
onInit(swiper) function 回調函數，初始化後執行。
onSlideChangeStart(swiper) function 回調函數，滑塊釋放時如果觸發slider切換則執行。free模式下無效。
onSlideChangeEnd(swiper) function 回調函數，slider切換結束時執行。free模式下無效。
onTransitionStart(swiper) function 回調函數，過渡開始時觸發，接收Swiper執行個體作為參數。
onTransitionEnd(swiper) function 回調函數，過渡結束時觸發，接收Swiper執行個體作為參數
onTouchStart(swiper, event) function 回調函數，當碰觸到slider時執行。可選Swiper和touchstart事件作為參數。
onTouchMove(swiper, event) function 回調函數，手指觸碰Swiper并滑動（手指）時執行。此時slide不一定會發生移動
onTouchMoveOpposite(swiper, event) function 回調函數，當手指觸碰Swiper并且沒有按照direction設定的方向移動時執行。可選Swiper執行個體和touchmove事件作為參數。
onSliderMove(swiper, event) function 回調函數，手指觸碰Swiper并拖動slide時執行。
onTouchEnd(swiper, event) function 回調函數，當釋放slider時執行。
onClick(swiper, event) function 回調函數，當你點選或輕觸Swiper 300ms後執行。
onTap(swiper, event) function 回調函數，當你輕觸(tap)Swiper後執行。在移動端，click會有 200~300 ms延遲，是以請用tap代替click作為點選事件。
onDoubleTap(swiper, event) function 回調函數，當你兩次輕觸Swiper 時執行，類似于輕按兩下。
onImagesReady(swiper) function 回調函數，所有内置圖像加載完成後執行，同時“updateOmImagesReady”需設定為“true’。
onProgress(swiper, progress) function 回調函數，當Swiper的progress被改變時執行。
onReachBeginning(swiper) function 回調函數，Swiper切換到初始化位置時執行。
onReachEnd(swiper) function 回調函數，當Swiper切換到最後一個Slide時執行。
onDestroy(swiper) function 回調函數，銷毀Swiper時執行。
onSetTranslate(swiper, translate) function 回調函數，每次當Swiper開始過渡動畫時持續執行。transtion擷取到的是Swiper的speed值。
onSetTransition(swiper, transition) function 回調函數，wrapper改變其位置時執行。傳回目前transform 的偏移量的對象。
onAutoplayStart(swiper) function 回調函數，自動切換開始時執行。
onAutoplayStop(swiper) function 回調函數，自動切換結束時執行。
onLazyImageLoad(swiper,slide, image) function 回調函數，圖檔延遲加載開始時執行。
onLazyImageReady(swiper, slide, image) function 回調函數，圖檔延遲加載結束時執行。
Namespace(命名空間)
slideClass string ‘swiper-slide’ 設定slide的類名。
slideActiveClass string ‘swiper-slide-active’ 設定活動塊的類名。
slideVisibleClass string ‘swiper-slide-visible’ 設定可視塊的類名。
slideDuplicateClass string ‘swiper-slide-duplicate’ loop模式下被複制的slide的類名。
slideNextClass string ‘swiper-slide-next’ active slide的下一個slide的類名。
slidePrevClass string ‘swiper-slide-prev’ active slide的前一個slide的類名。
wrapperClass string ‘swiper-wrapper’ 設定wrapper的css類名。
bulletClass string ‘swiper-pagination-bullet’ pagination分頁器内元素的類名。
bulletActiveClass string ‘swiper-pagination-bullet-active’ pagination分頁器内活動(active)元素的類名。
paginationHiddenClass string ‘swiper-pagination-hidden’ 分頁器隐藏時的類名。
buttonDisabledClass string ‘swiper-button-disabled’ 前進後退按鈕不可用時的類名。

Swiper常用方法

1、mySwiper.destroy()

銷毀Swiper(true)。銷毀所有綁定的監聽事件，移除滑鼠鍵盤事件，釋放浏覽器記憶體。

2、mySwiper.startAutoplay()

開始自動切換。一般用來做“Play”按鈕。

3、mySwiper.stopAutoplay()

停止自動切換。一般用來制作“pause”按鈕。

4、mySwiper.slideNext(runCallbacks, speed)

滑動到下一個滑塊。

5、mySwiper.slidePrev(runCallbacks, speed)

滑動到前一個滑塊。

6、mySwiper.slideTo(index, speed, runCallbacks)

滑動到到指定滑塊。

index:必選，num，指定将要切換到的slide的索引，第一個為0

speed:可選，num(機關ms)，切換速度

runCallbacks:可選，boolean，設定為false時不會觸發onSlideChange回調函數。

附：

Swiper官網：http://www.idangero.us/sliders/swiper/index.php

Swiper中文網：http://www.swiper.com.cn/

轉自：http://qqfe.org/

轉載于:https://www.cnblogs.com/xinlinux/p/4720198.html

javascript php
上一篇: WSL2性能都快趕上原生linux了，Windows11的這波操作的确很牛！Phoronix近日使用AMD的Ryzen7
下一篇: sql練習學生成績查詢實踐

繼續閱讀