jquery idangerous.swiper移動觸摸滑塊插件

時間  2019-11-18
標籤 jquery idangerous.swiper idangerous swiper 移動 觸摸 滑塊 插件 欄目 JQuery 简体版
原文   原文鏈接

其中官網網址來自：javascript

http://www.swiper.com.cn/          中文首頁官網（最重要的說明）php

http://www.idangero.us/sliders/swiper/api.phpcss

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

其中調用過的實例爲：http://www.cnblogs.com/chenguiya/p/4897140.htmljava

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

2、特徵（feature)css3

一、1：1觸控運動
   Swiper默認提供1:1的觸控距離，固然，這個比率是能夠設置的。（touchRatio）git

二、觸控模仿
   這個功能對於開發桌面網站會頗有用。簡單來講，就是由於Swiper可以讓鼠標事件表現得像觸屏事件（點擊以及拖曳滑塊）github

三、水平/垂直
   Swiper運動主要有兩種模式，horizontal(水平滑動)以及vertical（垂直運動的滑動）web

四、自由模式（Free Mode）
   這種模式下可以讓slides 無需定位，就像一般的滑動條。（看下面的例子）

五、旋轉調整 （rotation/resize）
   Swiper 在移動設備旋轉後能自適應尺寸。

六、響應式
   能使用百分比的寬高定義slides,爲移動端提供不一樣的解決方案。

七、滑動阻止
   簡單來講，就是，只能使用一種模式，水平或者垂直滑動。

八、抵抗反彈（resistant bounds）
   Swiper可以提供一種機制，就是當滑動滑塊超過最左以及最右（最上或最下）的位置時觸發的一種抵禦機制。

九、原生要素（native momentum）
   有很多的原生東西提供給Swiper。

十、內建分頁控制
    Swiper可以快速生成內建的分頁控制（pagination）,指定html 某一標籤爲pagination，Swiper就能作不少東西了。

十一、自動播放
    只用設置延遲時間，Swiper就會自動地輪播slides直到你觸碰該滑塊（touch）爲止。

十二、循環模式（Loop mode）
    該種模式下，你可以無限滑動滑塊，到最後一個以後會跳轉回第一個。

1三、旋轉模式（Carousel mode）
    Swiper 可以讓你在slides父容器下設置你所須要展現的slides數量。

1四、滑動容器
    在該特徵下可以使用Swiper在一些簡單的能滑動的區域裏，沒有slides。在Apps裏十分有用。

1五、嵌套Swipers
    可以將Swipers嵌套入各類不一樣的Swiper 的slide裏，例如垂直的或水平的。

1六、任意的HTML 標籤
    能夠將任一的HTML 內容放到slide裏，不止僅限於圖像。

1七、硬件加速
    swiper 使用硬件加速技術（若是該移動設備支持的話）可以獲得良好流暢的動畫效果以及優美的外觀，尤爲是在IOS設備裏。

1八、豐富的API
    Swiper擁有豐富的API接口。（不過關於中文文檔彷佛很少，沒找着。）可以讓開發者生成我的獨有的分頁器（pagination），上下滑塊的按鈕以及4個回調函數：onTouchStart,onTouchMove,onTouchEnd,onSlideSwitch。

1九、靈活的配置
    Swiper在初始化的時候可以接受多個參數以便讓其儘量的靈活。可以配置動畫的速度（speed），模式（mode水平抑或垂直的），以及自由模式（free mode）...以及其餘..

20、插件API（Plugins API）
    Swiper從1.7版本開始就變得強大起來了，由於有更多而簡單的插件API容許開發者創造屬於本身的Swiper 插件或經過Swiper的核心創制hooks(掛鉤)（該官網處提供了幾款優秀的插件Swiper smooth progress, Swiper hash         navigation,swiper scrollbar）

2一、良好的兼容性
    Swiper通用性的測試環境：移動端的Safari（iOS5下），Android 2.1+，windows Phone 8,以及最新版本的谷歌瀏覽器（Chrome），Safari，Firefox，IE10 以及歐朋瀏覽器（Opera）

2二、老版本IE的兼容
    Swiper 2.x 開始，經過DOM動畫，而非css transitions 兼容IE7 以上（須要包含jQuery），由於IE7不支持css3 transitions....簡單來講，支持IE7 以上版本。

2三、獨立性
    Swiper不依賴像jQuery那樣的js類庫，所以可以讓Swiper更加的小型以及快速。因此Swiper可以很安全地應用諸如jQuery、zepto、jQuery Mobile，jQTouch等等其餘的js類庫。

2四、超輕量級
    壓縮後僅僅10KB左右。
    以上，就是Swiper可以作的，應用以上特徵就使用原生屬性方法可以快速生成使人驚歎的觸控接口以及apps。

3、例子

一、下載swiper最新版本https://github.com/nolimits4web/Swiper  或者百度雲下載   /U體育下載資源/Swiper-master.zip

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

 

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

 

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

三、使用下面的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>

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

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

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

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

 

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

 

API:初始化刷卡的選項

new Swiper（container,options）

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

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

用法：

 

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

回調函數中。

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

回調函數中。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

mySwiper.params.speed = 500;

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

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

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

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

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

4、選項（options）

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

參數 類型 默認 Example（例子） Description（說明）
 speed  number  300  600  slides滑塊動畫之間的持續時間（單位ms）
 direction  string horizontal  vertical  多是「水平」或「垂直」（垂直滑塊）。
 initialSlide  number  0  2  初始塊（頁面）的索引
touchEventsTarget string 'container'   swipers事件對象，默認狀態下全部的觸控事件只能用於wrapper。如若須要其餘元素包含在container內以及使用swipers,那麼可使用'container'. 2.4.2版本新增
     自動播放
autoplay number false   轉換之間的延遲時間（毫秒）。若是未指定此參數，自動播放將被禁用
autoplayDisableOnInteraction boolean true   當設置爲false時，用戶操做以後（swipes,arrow以及pagination 點擊）autoplay不會被禁掉，用戶操做以後每次都會從新啓動autoplay。
Freemode
freeMode boolean false   若是真那麼幻燈片將不會有固定的位置
freeModeMomentum boolean true   若是屬實，而後滑動就會不停地往前走了一段時間後，你釋放
freeModeMomentumRatio number 1   更高的價值產生較大的勢頭距離後釋放滑塊
freeModeMomentumBounce boolean true   設置爲假，若是你想禁用免費模式的勢頭反彈
freeModeMomentumBounceRatio number 1   更高的價值產生較大的反彈勢頭的影響
影響
effect string 'slide'   多是"slide", "fade", "cube" or "coverflow"
fade object 
fade: {
  crossFade: false
}

 

   淡入淡出效果參數
cube object 
cube: {
  slideShadows: true,
  shadow: true,
  shadowOffset: 20,
  shadowScale: 0.94
}

 

   立方體效果參數。爲了得到更好的性能，你能夠禁用陰影
coverflow object 
coverflow: {
  rotate: 50,
  stretch: 0,
  depth: 100,
  modifier: 1,
  slideShadows : true
}

 

   CoverFlow效果參數。爲了得到更好的性能，你能夠禁用陰影
幻燈片電網
spaceBetween number 0   在PX幻燈片之間的距離。
slidesPerView number or 'auto' 1  

旋轉模式下，設置slider's容器可以同時顯示的slides數量。另外，支持'auto'值，會根據容器container的寬度調整slides數目。‘auto’不兼容loop模式

每一個視圖的幻燈片的數量（在同一時間上滑動的容器滑動可見）。

若是你使用它的「自動」值，並隨着循環：真正的，那麼你須要指定loopedSlides用幻燈片的數量參數循環（一式兩份）

slidesPerView：「自動」目前不具備多行模式下，兼容當slidesPerColumn > 1
slidesPerColumn number 1   每列幻燈片的數量，對於多行佈局
slidesPerColumnFill string 'column'   多是「列」或「行」。定義幻燈片如何填補行，按列或行
slidesPerGroup number 1   幻燈片組數字來定義和啓用組滑動。實用與slidesPerView> 1使用
 centeredSlides  boolean  false    若是屬實，那麼活動的幻燈片將集中，而不是老是在左側。
搶光標
grabCursor boolean false   該選項給Swiper用戶提供小小的貼心應用，值爲true時，光標在Swiper上時成手掌狀。
分頁
pagination string / HTMLElement null   字符串的CSS選擇器的容器分頁或HTML元素
paginationClickable boolean false   若是真那麼點擊分頁按鈕，將致使過渡到合適的幻燈片
paginationHide boolean false   切換（隱藏/真）分頁容器的知名度，當點擊滑塊的容器
paginationBulletRender(index, className) function null   此參數能夠徹底自定義分頁子彈，你須要在這裏傳遞，接受函數的索引分頁子彈數目和所需的元素類名（類名）。

例如，使用此代碼，咱們能夠添加幻燈片編號爲分頁子彈：

var swiper = new Swiper('.swiper-container', {
  //...
  paginationBulletRender: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
  }
});
導航按鈕
nextButton string / HTMLElement null   字符串的CSS選擇器或元素的HTML元素會像「下一步」按鈕，點擊以後就能夠了
prevButton string / HTMLElement null   字符串的CSS選擇器或元素的HTML元素，將工做像「後退」按鈕，點擊以後就能夠了
Scollbar     
 scrollbar  string / HTMLElement  null    字符串的CSS選擇器或容器滾動的HTML元素。
 scrollbarHide  boolean  true    用戶交互後自動隱藏滾動條
鍵盤/鼠標滾輪
keyboardControl boolean false   值爲true時，水平模式下，能使用鍵盤左右方向鍵滑動，垂直模式下能使用上下方向鍵滑動
mousewheelControl boolean false   值爲true時，可以使用鼠標滑輪滑動swiper
mousewheelControlForceToAxis boolean false   值爲真時，鼠標輪滑會改變軸向，因此水平模式下的鼠標滑輪只做用於水平鼠標滑塊，垂直的做用於垂直模式。
環
loop boolean false  

設置爲真正的使能連續循環模式

若是你使用它連同slidesPerView：「auto」，那麼你須要指定loopedSlides用幻燈片的數量參數循環（一式兩份）

 
 loopAdditionalSlides  number  0    幻燈片的加成數，將建立循環以後被克隆
 loopedSlides  number  null    若是你使用slidesPerView：「auto」與循環模式，你應該告訴給Swiper 多少幻燈片應該回路（副本）使用此參數
         
         
         
         
         
         

 

滑塊方法和屬性

以後咱們初始化滑塊咱們有變量（如它的初始化實例mySwiper例如可變以上）與有用的方法和屬性：

性能  
 mySwiper.params  與經過初始化參數對象
 mySwiper.container  採用滑蓋容器HTML元素Dom7 / jQuery的元素。爲了得到香草HTML元素使用mySwiper.container [0]
mySwiper.wrapper 採用滑蓋包裝HTML元素Dom7 / jQuery的元素。爲了得到香草HTML元素使用mySwiper.wrapper [0]
mySwiper.slides 的幻燈片HTML元素Dom7 / jQuery的陣列狀的集合。爲了得到特定的幻燈片HTML元素的使用mySwiper.slides [1]
mySwiper.bullets Dom7 / jQuery的集合分頁按鈕HTML元素。爲了得到特定的幻燈片HTML元素的使用mySwiper.bullets [1]
mySwiper.width 寬度集裝箱
mySwiper.height 容器的高度
mySwiper.translate 包裝的當前值轉換
mySwiper.progress 包裝的目前的進輾轉化（從0到1）
mySwiper.activeIndex

當前活動幻燈片的索引號

注意，在循環模式活性指數值將老是錯開在多個環/重複幻燈片
mySwiper.previousIndex 之前的活動幻燈片的索引號
mySwiper.isBeginning 之前的活動幻燈片的索引號
mySwiper.isBeginning 如此，若是滑塊上最「左」/「頂」位置
mySwiper.isEnd 如此，若是滑塊上最「正確」/「底」的位置
mySwiper.autoplaying 真正若已啓用自動播放
mySwiper.animating 真要是刷卡正處於轉型期
mySwiper.touches 用下面的觸摸事件屬性對象：
  • mySwiper.touches.startX
  • mySwiper.touches.startY
  • mySwiper.touches.currentX
  • mySwiper.touches.currentY
  • mySwiper.touches.diff
mySwiper.clickedIndex 上次單擊幻燈片的索引號
mySwiper.clickedSlide 連接到最後點擊幻燈片（HTML元素）
方法：
mySwiper.slideNext(runCallbacks, speed); 運行過渡到下一個幻燈片
  • runCallbacks - 布爾 -將其設置爲假（默認狀況下它是真實的）和過渡將不會產生onSlideChange回調函數。可選
  • 速度 - 數字 -轉換時間（毫秒）。可選
mySwiper.slidePrev(runCallbacks, speed); 運行過渡到前一張幻燈片
  • runCallbacks - 布爾 -將其設置爲假（默認狀況下它是真實的）和過渡將不會產生onSlideChange回調函數。可選
  • 速度 - 數字 -轉換時間（毫秒）。可選
mySwiper.slideTo(index, speed, runCallbacks); 運行過渡到與指數等於'指數'參數的持續時間等於「速度」參數的幻燈片。
  • 索引 - 數字 -滑動的索引號
  • 速度 - 數字 -轉換時間（毫秒）。可選
  • runCallbacks - 布爾 -將其設置爲假（默認狀況下它是真實的）和過渡將不會產生onSlideChange回調函數。可選
mySwiper.update（updateTranslate）;

此方法包括updateContainerSize，updateSlidesSize，的UpdateProgress，updatePagination和updateClasses方法

你應該把它叫作後添加/手動刪除幻燈片，或者你隱藏/顯示後，或作任何定製修改DOM與刷卡

  • updateTranslate - 布爾 -將其設置爲真（默認狀況下它是假的），硬置位/復位/更新刷卡包裝翻譯。它若是使用非默認的效果或滾動條是頗有用的。可選

該方法還包括能夠單獨使用下列方法的subcall：

  • mySwiper.updateContainerSize（） - 從新計算刷卡容器的大小
  • mySwiper.updateSlidesSize（） - 從新計算幻燈片和他們的偏移數量。有用的後添加/刪除幻燈片使用JavaScript
  • mySwiper.updateProgress（） - 從新計算刷卡進步
  • mySwiper.updatePagination（） - 更新分頁佈局和從新渲染子彈
  • mySwiper.updateClasses（） - 最新活動/上/下一個班的幻燈片和子彈
mySwiper.onResize(); 刷卡執行，當你調整瀏覽器的這個方法。它幾乎是相同.update（），但有點軟，沒有硬設置翻譯
mySwiper.detachEvents(); 卸下全部事件監聽器
mySwiper.attachEvents（）; Atach全部事件監聽器再次
mySwiper.startAutoplay（）; 開始自動播放。這多是自定義的「播放」和「暫停」按鈕有用
mySwiper.stopAutoplay（）; 中止自動播放。這多是自定義的「播放」和「暫停」按鈕有用
mySwiper.destroy（deleteInstance，cleanupStyles）; 破壞滑塊實例和分離全部事件監聽器，哪裏
  • deleteInstance - 布爾 -將其設置爲假（默認狀況下它是真實的），不刪除刷卡實例
  • cleanupStyles - 布爾 -將其設置爲真（默認狀況下它是假的），全部的自定義樣式將從幻燈片，包裝和容器中取出。若是你須要摧毀刷卡，並與新的選擇，或在不一樣的方向再次初始化有用
mySwiper.appendSlide(slides);

添加新的幻燈片到最後。幻燈片能夠是HTML元素或具備新的幻燈片或陣列例如幻燈片，例如HTML字符串：

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>'
]);

 
 mySwiper.prependSlide(slides);

 添加新的幻燈片的開始。幻燈片能夠是HTML元素或具備新的幻燈片或陣列例如幻燈片，例如HTML字符串：

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>'
]);

 
 mySwiper.removeSlide(slideIndex);

 刪除選定幻燈片。slideIndex能夠是一個數與滑動索引移除或陣列的索引，例如：

mySwiper.removeSlide（0）; //取出第一滑動 
mySwiper.removeSlide（[ 0，1 ​​]）; //取出的第一和第二滑動

 
 mySwiper.removeAllSlides（）;  刪除全部幻燈片
 mySwiper.setWrapperTranslate(translate);  設置自定義CSS3轉換的轉換價值刷卡包裝
 mySwiper.getWrapperTranslate（）;  獲取刷卡包裝CSS3電流值變換翻譯
 mySwiper.on(callback, handler)  添加的回調/事件處理
 mySwiper.once(callback, handler)  添加將只執行一次事件/回調
 mySwiper.off(callback)  刪除全部處理程序指定的回調/事件
mySwiper.lockSwipeToNext（）
mySwiper.unlockSwipeToNext（）		  禁用（鎖定）/啓用（解鎖）滑動到下一幻燈片的能力
mySwiper.lockSwipeToPrev（）
mySwiper.unlockSwipeToPrev（）		 禁用（鎖定）/啓用（解鎖）滑動到前面的滑動能力
mySwiper.lockSwipes（）
mySwiper.unlockSwipes（）		 禁用（鎖定）/啓用（解鎖）更改幻燈片的能力
mySwiper.disableMousewheelControl（）; 禁用鼠標滾輪控制
mySwiper.enableMousewheelControl（）; 啓用鼠標滾輪控制
mySwiper.disableKeyboardControl（）; 禁用鍵盤控制
mySwiper.enableKeyboardControl（）; 使鍵盤控制

 

哈希導航(Hash Navigation)

 

散列導航意欲有一個連接到特定的幻燈片，容許加載頁與特定的滑動打開。

 

爲了使它工做，你須要經過傳遞來啓用它hashnav：true參數，並添加幻燈 ​​片中的散列數據散列屬性：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" data-hash="slide1">Slide 1</div>
        <div class="swiper-slide" data-hash="slide2">Slide 2</div>
        <div class="swiper-slide" data-hash="slide3">Slide 3</div>
        <div class="swiper-slide" data-hash="slide4">Slide 4</div>
        <div class="swiper-slide" data-hash="slide5">Slide 5</div>
        ...
    </div>
</div>
var swiper = new Swiper('.swiper-container', {
  //enable hash navigation
  hashnav: true
})

視差(Parallax)

因爲版本3.0.3刷卡支持刷卡視差過渡效果/幻燈片嵌套元素。有兩種類型的視差元件的支持：

  • 直子元素swiper-container。對於這樣的元素視差效果將取決於總滑塊的進展。有用的視差背景
  • 幻燈片子元素。對於這樣的元素視差效果將取決於幻燈片的進展

爲了使您須要初始化與刷卡經過視差效果parallax:true參數，並添加data-swiper-parallax特性所需的元素

<div class="swiper-container">
    <!-- 視差背景元素 -->
    <div class="parallax-bg" style="background-image:url(http://lorempixel.com/900/600/nightlife/2/)" data-swiper-parallax="-23%"></div>
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <!-- 每張幻燈片具備視差的標題 -->
            <div class="title" data-swiper-parallax="-100">Slide 1</div>
            <!-- 視差字幕 -->
            <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
            <!-- 和視差文本 -->
            <div class="text" data-swiper-parallax="-300">
              <p>Lorem ipsum dolor sit amet, ...</p>
            </div>
        </div>
        ...
    </div>
</div>

與指定的全部元素data-swiper-parallax屬性將有視差的過渡。這個屬性能夠接受：

  • 數字 -在像素值（做爲標題，副標題上面的例子中），以根據進度移動元素。在這種狀況下，這樣的元素，將根據滑塊位置在像素移動在±這個值（下一首或上）
  • 百分比 - （做爲「視差-BG」），以根據進展狀況，並就其規模移動的元素。在這種狀況下，根據滑動位置等元素將被移至±它的大小（寬度在水平方向和高度在垂直方向）的這一比例（下一首或上）。因此，若是元素有400像素寬度和指定數據刷卡視差=「50％」，那麼它會在±200像素移動

它也能夠經過使用覆蓋視差方向data-swiper-parallax-x和data-swiper-parallax-y特性與相同的規則

延遲加載(Lazy Loading)

 

因爲3.0.4版本Swiper支持圖像延遲加載。

 

要啓用延遲加載，首先咱們須要在幻燈片圖像的特殊佈局：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img data-src="path/to/picture-1.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
        <div class="swiper-slide">
            <img data-src="path/to/picture-2.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
        <div class="swiper-slide">
            <img data-src="path/to/picture-3.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
    </div>
</div>

正如你看到的：

  • 每個懶加載的圖像應該有更多的「刷卡懶」級
  • 圖片來源應該在「數據SRC」指定屬性而不是「SRC」

您也能夠添加動畫預加載微調滑動的映像加載後自動將被刪除：

<div class="swiper-lazy-preloader"></div>

或白色，一個是黑暗的佈局：

<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>

以後，咱們須要啓用延遲加載上刷卡初始化：

var swiper = new Swiper('.swiper-container', {
     // 全部圖像禁用預壓
    preloadImages: false,
    // 啓用延遲加載
    lazyLoading: true
});

若是你使用slidesPerView「自動」或slidesPerView> 1，那麼你也應該啓用watchSlidesVisibility和刷卡將在當前可見的幻燈片圖像加載

 

 

 

Example

如下須要引用jQuery文件

 

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

Callbacks API

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

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

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

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

 

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

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

解除（fire）callback 函數語句：

mySwiper.fireCallback('SlideChangEnd',mySwiper);

移除（remove）callbacks:

mySwiper.removeCallback('SlideChangEnd');

Slides API

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

Slide 實例

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

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

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

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

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

  • html(string[字符型],required[必需的])-生成的滑塊的HTML元素的內容
  • slideClassList(stirng[字符型],optional[可選的])- 建立類」class「屬性。缺省值爲"swiper-slide "
  • element(string[字符型],optional[可選的])-建立滑塊的HTML標籤，缺省值爲"div"
1 var mySwiper = $(".swiper-container").swiper({...some optins...})
 2 
 3 //建立一個新的swiper實例
 4 
 5 var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>");
 6 
 7 //生成的HTML滑塊："<div class="swiper-slide"><p>Here is my new slide</p></div>"
 8 
 9 var newSlide = mySwiper.createSlide("<p>Hello</p>","swiper-slide red-slide","span");
10 
11 //生成的HTML滑塊："<span class="swiper-slide red-slide"><p>Hello</p></span>"

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

  • newSlide.append()-添加slide到slider中的最後一個位置。返回Slide實例
  • newSlide.prepend()-添加slide到slider中的第一個位置。返回Slide實例
  • newSlide.remove()-移除slide
  • newSlide.getWidth()-返回slide寬度
  • newSlide.getHeight()-返回slide高度
  • newSlide.getOffset()-返回包含滑塊left、top偏移量的對象
  • newSlide.insertAfter(index)[index-number]-插入新滑塊到index索引以後。返回Slide實例
  • newSide.clone()-複製slide到新slide實例。返回新複製的Slide實例
1 //例子
 2 
 3 var mySwiper = $(".swiper-container").swiper({...some optins...})
 4 
 5 var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>");
 6 
 7 newSlide.append()//newSlide添加到全部已存在的slides後面
 8 
 9 var newSlide = mySwiper.createSlide("<p>Hello</p>","swiper-slide red-slide","span");
10 
11 newSlide.prepend()//-newSlide添加到全部已存在的slides的前面（第一個位置）
12 
13 //複製、插入Slide
14 
15 var clonedSlide = newSlide.clone();
16 
17 clonedSlide.append();
18 
19 //crazy 鏈式
20 
21 var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>");
22 
23 newSlide.prepend().clone().append().clone().inertAfter(2)
24 
25 //-新建立的slide被添加到全部已存在的slide前面，而後複製slide並添加到最後，接着在複製添加到index爲2的位置上

還有一些有用的方法：

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

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

  • slide.index()-返回slide索引
  • slide.isActive()返回true若是該塊是活動的
  • slide.setData(name,value)[name-string]-存儲數據方法，可以存儲全部類型變量-數組，對象，數字，字符等等
  • slide.getData(name)[name-string]返回存儲的變量值
  • slide.data(name,value)[name-string,value-string]-保存變量值到data-[name]屬性中
  • slide.data(name)[name-string]-返回data-[name]屬性值
1 //例子
 2 
 3 var mySwiper = $('.swiper-container').swiper({...some options...})
 4 
 5 //建立slide實例
 6 var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>');
 7 newSlide.append().clone().html('<p>New HTML</p>').prepend() 
 8 // 新建立的slide被添加到最後，而後複製該slide並添加html內容，最後插入到第一個位置
 9 
10 var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>');
11 alert(newSlide.html()) // -> <p>Here is my new slide</p>
12 
13 Store/Get data:
14 newSlide.prepend().setData('apples',['iMac', 'MacBook Pro', 'iPhone', 'iPad'])
15 newSlide.getData('apples') // -> ['iMac', 'MacBook Pro', 'iPhone', 'iPad']
16 
17 newSlide.data('apple','iPad');
18 newSlide.data('apple') // ->'iPad'

Swiper Slides

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

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

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

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

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

  • mySwiper.appendSlide(slideInstance)[slideInstance-HTMLElement]-插入到slider末尾。返回slide實例
  • mySwiper.prependSlide(innerHTMl,slideClassList,element)-新建立slide並插入到slider首位置。返回slide實例
  • mySwiper.prependSlide(slideInstance)[slideInstance-HTMLElement]-將slideInstance插入到slider首位置。返回slide實例。
  • mySwiper.insertSlideAfter(index,innerHTML,slideClassList,element)-新建立slide並插入到slider指定的索引位置index。返回slide實例。
  • mySwiper.insertSlideAfter(index,slideInstance)-將slideInstance插入到slider指定的索引位置index。返回slide實例。
  • mySwiper.removeSlide(index)[index-numer]-移除索引爲index的slide
  • mySwiper.removeLastSlide()-移除最後一個slide
  • mySwiper.removeAllSlides()-移除全部slides
  • mySwiper.getSlide(index)[index-number]-返回index索引的slide
  • mySwiper.getLastSlide()-返回最後一個slide
  • mySwiper.getFirstSlide()-返回第一個slide
1 //例子:
 2 
 3 //建立slide並插入
 4 mySwiper.appendSlide('Hello World')
 5 //或者:
 6 var newSlide = mySwiper.createSlide('Hello World')
 7 mySwiper.appendSlide(newSlide)
 8 //或者:
 9 mySwiper.appendSlide( mySwiper.createSlide('Hello World') )
10 
11 //複製第一個slide並插入到最後
12 mySwiper.getFirstSlide().clone().append();
13 //或者:
14 mySwiper.appendSlide( mySwiper.getSlide(0).clone() )
15 
16 //複製第二個slide修改內容並插入到最後
17 mySwiper.getSlide(1).clone().html('Hello New World!').append();
18 
19 //移除最後一個slide
20 mySwiper.removeLastSlide()
21 
22 //移除第二個slide
23 mySwiper.removeSlide(1)
24 
25 //Trick: 更換第一與第二個slide位置
26 mySwiper.getSlide(0).insertAfter(1)
27 
28 //Trick: 移動第一個slide到最後一個位置
29 mySwiper.getFirstSlide().append()
30 
31 //slide數量
32 alert(mySwiper.slides.length)
33 
34 //改變每一個slide的html
35 for (var i = 0; i < mySwiper.slides.length; i++) {
36   var slide = mySwiper.slides[i]
37   slide.html('<p> My index number is '+i+' </p>')
38 }
Important Notes
重要備註
當使用改變slides數量的方法時（例如append,prepend,remove等等），reInit()方法會被調用而後slides數量會自動從新計算。因此很是不推薦動態添加/刪除slides時在"for"循環中使用"slides.length"
，由於這樣作可能產生死循環。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程