Swiper簡(jiǎn)介

Swiper是純javascript打造的滑動(dòng)特效插件遣耍，面向手機(jī)亲桦、平板電腦等移動(dòng)終端。Swiper能實(shí)現(xiàn)觸屏焦點(diǎn)圖焰雕、觸屏Tab切換衷笋、觸屏多圖切換等常用效果。

1矩屁、Swiper初始化

swiper的使用非常簡(jiǎn)單辟宗，能夠快速實(shí)現(xiàn)輪播、滾動(dòng)等效果吝秕。首先需要引入對(duì)應(yīng)的css泊脐、js文件，現(xiàn)在最新Swiper初始化5.0郭膛，繼承了非常多的功能晨抡。
通過(guò)new Swiper()初始化一個(gè)Swiper，返回初始化后的Swiper實(shí)例则剃。

外層.swiperContainer是Swiper容器的css選擇器耘柱，是不可少的。swiper-slide是每個(gè)項(xiàng)棍现。

<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,//可選選項(xiàng)调煎，自動(dòng)滑動(dòng)
})

//如果你初始化時(shí)沒(méi)有定義Swiper實(shí)例，后面也可以通過(guò)Swiper的HTML元素來(lái)獲取該實(shí)例
new Swiper('.swiper-container')
var mySwiper = document.querySelector('.swiper-container').swiper
mySwiper.slideNext();
</script>

上面就是一個(gè)簡(jiǎn)單的左右滑動(dòng)效果示例己肮。
Tips：開(kāi)啟loop循環(huán)滾動(dòng)后士袄，會(huì)通過(guò)js動(dòng)態(tài)創(chuàng)建兩個(gè)重要的class類(lèi)，.swiper-slide-prev,.swiper-slide-next,是當(dāng)前激活swiper-slide-active的上一個(gè)和下一個(gè)元素谎僻，也是通過(guò)這三個(gè)類(lèi)的控制鸣剪，來(lái)實(shí)現(xiàn)banner切換的晴氨。

2蝗岖、Swiper觸發(fā)條件常用參數(shù)

1初狰、allowTouchMove
允許觸摸滑動(dòng)。設(shè)為false時(shí)，slide無(wú)法滑動(dòng)挎挖，只能使用擴(kuò)展API函數(shù)例如slideNext() 或slidePrev()或slideTo()等改變slides滑動(dòng)这敬。
比如我們?cè)赑C時(shí)，要通過(guò)點(diǎn)擊事件實(shí)現(xiàn)banner滑動(dòng)效果蕉朵，移動(dòng)端通過(guò)滑動(dòng)崔涂，就要通過(guò)該屬性來(lái)控制
2、followFinger
跟隨手指始衅。如設(shè)置為false冷蚂，手指滑動(dòng)時(shí)slide不會(huì)動(dòng)，當(dāng)你釋放時(shí)slide才會(huì)切換觅闽。
3帝雇、touchAngle
允許觸發(fā)拖動(dòng)的角度值涮俄。默認(rèn)45度蛉拙，即使觸摸方向不是完全水平也能拖動(dòng)slide。

image

  <!-- 延遲加載圖片的結(jié)構(gòu) -->
<div class="swiper-slide">
    <img data-src="path/to/picture-1.jpg" class="swiper-lazy">
    <div class="swiper-lazy-preloader"></div>
</div>

var mySwiper = new Swiper('.swiper-container', {
  lazy: {
    loadPrevNext: true,
    },
})

3煮仇、Swiper Touches事件函數(shù)

1、touchStart(event)谎仲、touchMove(event)浙垫、touchEnd(event)
類(lèi)似于移動(dòng)端touch事件，可監(jiān)聽(tīng)事件進(jìn)行操作强重。

2绞呈、slideChange贸人、sliderMove
slideChange事件函數(shù)，在當(dāng)前Slide切換到另一個(gè)Slide時(shí)執(zhí)行(activeIndex發(fā)生改變)佃声，一般是在點(diǎn)擊控制組件艺智、釋放滑動(dòng)的時(shí)間點(diǎn)。
sliderMove手指觸碰Swiper并拖動(dòng)slide的過(guò)程中不斷觸發(fā)sliderMove函數(shù)圾亏。接受touchmove事件作為參數(shù)十拣。
3、click(event)
觸發(fā)時(shí)機(jī)
如果沒(méi)有觸發(fā)touchMove()志鹃，則釋放觸摸/鼠標(biāo)時(shí)：
(1).立即執(zhí)行tap()
(2).如果觸摸/鼠標(biāo)按壓時(shí)間小于300ms夭问，并且兩次觸摸/點(diǎn)擊間隔大于300ms，延遲300ms執(zhí)行onClick
(3).如果觸摸/鼠標(biāo)按壓時(shí)間小于300ms曹铃，并且兩次觸摸/點(diǎn)擊間隔小于300ms缰趋，立即執(zhí)行doubleTap

3、tap(event)
回調(diào)函數(shù)陕见，當(dāng)你輕觸(tap)Swiper后執(zhí)行秘血。在移動(dòng)端，click會(huì)有 200~300 ms延遲评甜，所以請(qǐng)用tap代替click作為點(diǎn)擊事件灰粮。
接受touchend事件作為參數(shù)。
4忍坷、resize當(dāng)瀏覽器尺寸發(fā)生變化時(shí)執(zhí)行
如：

var mySwiper = new Swiper('.swiper-container',{
  on: {
    resize: function(){
      //窗口變化了
    }, 
  },
})

4粘舟、總結(jié)

在實(shí)際的web開(kāi)發(fā)中，總是需要兼容PC跟移動(dòng)端佩研，如果使用原生js自己寫(xiě)的話柑肴，不僅耗時(shí)，可能兼容性韧骗、穩(wěn)定性也不好嘉抒，特別是移動(dòng)端的touch觸控事件。使用swiper便不用考慮到兼容這些事袍暴，只要熟悉它的API些侍，便可快速實(shí)現(xiàn)手機(jī)，電腦網(wǎng)頁(yè)大部分滑動(dòng)政模，焦點(diǎn)圖岗宣、tab、觸摸導(dǎo)航等功能
舉個(gè)例子：
部分瀏覽器左右滑動(dòng)翻頁(yè)與頁(yè)面中左右滑動(dòng)監(jiān)聽(tīng)沖突淋样，導(dǎo)致我們要左右滑動(dòng)效果無(wú)法實(shí)現(xiàn)耗式。

$('.slideshowBox').each(function(index, el) {
    el.addEventListener('touchmove', function (event) {
        event.preventDefault();
    }, false);
});

slideshowBox是你需要手動(dòng)滑動(dòng)的父類(lèi)，禁止當(dāng)前區(qū)域的瀏覽器默認(rèn)事件不會(huì)影響瀏覽器的左右滑動(dòng)前進(jìn)后退功能。

雖然swiper使用很方便刊咳，使得移動(dòng)端效果更流暢完善彪见，但是在具體開(kāi)發(fā)中，有很多細(xì)節(jié)點(diǎn)反而更不好控制娱挨，且swiper默認(rèn)有一些樣式會(huì)對(duì)我們要的效果造成影響余指，比如.swiper-container{overflow:hidden;}，會(huì)使swipe選項(xiàng)卡被隱藏一部分跷坝。需要熟悉其文檔酵镜，關(guān)于class類(lèi)、事件等觸發(fā)柴钻，才能靈活地控制實(shí)現(xiàn)效果淮韭。