swiper裏面幾個有用的參數

概述

這是我本身用swiper和看別人官網源碼用swiper總結出來的，供之後開發時參考，相信對其餘人也有用。

observeParents

有時咱們會改變swiper的父級元素，好比頁面的resize方法；也有時咱們會動態給swiper添加一些子元素。這個時候，須要以下設置swiper，才能正常運行：

<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',
observer:true,
observeParents:true,
})
</script>

paginationBulletRender回調函數

這個回調函數用於徹底自定義分頁器的指示點，接受指示點索引和指示點類名做爲參數。經常使用於分頁器裏面要填充一些文字內容的情形。

<script>
var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  paginationClickable: true,
  paginationBulletRender: function (swiper, index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
  }
});  
</script>

lazyLoading懶加載

swiper有一個參數是preloadImages，它的默認值爲true，默認會加載全部圖片。若是想懶加載圖片，就可使用lazyLoading參數開啓圖片的懶加載。

這個時候須要將圖片img標籤的src改寫成data-src，而且增長類名swiper-lazy。背景圖的延遲加載則增長屬性data-background。而且給div增長一個swiper-lazy-preloader類。實例以下：

<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">
            <div data-background="path/to/picture-3.jpg" class="swiper-lazy">slide3</div>
        </div>
    </div>
</div> 
<script> 
    var mySwiper = new Swiper('.swiper-container',{
    lazyLoading : true,
})
</script>

fade效果

swiper還支持各類切換效果，好比"fade"（淡入）"cube"（方塊）"coverflow"（3d流）"flip"（3d翻轉）。實例以下：

<script language="javascript"> 
var mySwiper = new Swiper('#swiper-container1',{
effect : 'fade',
})
var mySwiper2 = new Swiper('#swiper-container2',{
effect : 'cube',
})
var mySwiper3 = new Swiper('#swiper-container3',{
effect : 'coverflow',
slidesPerView: 3,
centeredSlides: true,
})
var mySwiper4 = new Swiper('#swiper-container4',{
effect : 'flip',
})
</script>

superslide

在PC端建議使用更加人性化的superslide插件，由於它支持hover切換。