摘要：圖片延遲加載需要將圖片標(biāo)簽的改寫(xiě)成，并且增加類(lèi)名。取消拖動(dòng)最后一頁(yè)或者第一頁(yè)時(shí)的留白狀態(tài)抵抗率。邊緣抵抗力的大小比例?？蓱?yīng)用于分頁(yè)器，按鈕和滾動(dòng)條。點(diǎn)擊查看的文檔

使用 swiper 的過(guò)程中個(gè)人總結(jié)

swiper基礎(chǔ)演示

swiper API文檔

解決方法1: 
 var mySwiper = myApp.swiper(".guest-wrapper",{
     observer: true,//修改swiper自己或子元素時(shí)，自動(dòng)初始化swiper
     observeParents: true//修改swiper的父元素時(shí)，自動(dòng)初始化swiper
 });
 
解決方法2: 
直接寫(xiě)死寬高
  var mySwiper = myApp.swiper(".guest-wrapper",{
     width:500,
     height:500
 });

//外層的父級(jí) swiper 初始化
window.window_swiper = new Swiper(".window_swiper_container", {
    speed: 800,
    mousewheel: true,
    simulateTouch: false,
    nested: true,
    on: {

        onSlideChangeStart: function(swiper) { //滑動(dòng)父級(jí)需要激活滾輪事件
            swiper.enableMousewheelControl();
        }

    }
});


// 內(nèi)層子 swiper 初始化(可用在多個(gè)子 swiper 上)
    var swiper = new Swiper(".{{ns}}-swiper", {
      simulateTouch: false,
      mousewheel: true,
      nested: true,
      on: {
        slideChangeTransitionStart: function () {
        //此處禁止 外層 swiper
          window.window_swiper.mousewheel.disable();
        },
        slideChangeTransitionEnd: function () {
          window.window_swiper.mousewheel.enable();
        }
      }
    });

swiper4 懶加載文檔

設(shè)為true開(kāi)啟圖片延遲加載默認(rèn)值，使preloadImages無(wú)效?；蛘咴O(shè)置延遲加載選項(xiàng)。

圖片延遲加載：需要將圖片img標(biāo)簽的src改寫(xiě)成data-src，并且增加類(lèi)名swiper-lazy。
背景圖延遲加載：載體增加屬性data-background，并且增加類(lèi)名swiper-lazy。

還可以加一個(gè)預(yù)加載，

或者白色的


當(dāng)你設(shè)置了slidesPerView:"auto" 或者 slidesPerView > 1，還需要開(kāi)啟watchSlidesVisibility。


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

resistanceRatio

抵抗率。邊緣抵抗力的大小比例。值越小抵抗越大越難將slide拖離邊緣，0時(shí)完全無(wú)法拖離。

長(zhǎng)菜單超出隱藏滾動(dòng)切換

默認(rèn)為false，普通模式：slide滑動(dòng)時(shí)只滑動(dòng)一格，并自動(dòng)貼合wrapper，設(shè)置為true則變?yōu)閒ree模式，slide會(huì)根據(jù)慣性滑動(dòng)且不會(huì)貼合。

var mySwiper = new Swiper(".swiper-container",{
slidesPerView : 2,//"auto"
//slidesPerView : 3.7,
//如果設(shè)置為auto（例如制作全屏展示時(shí)的頁(yè)腳部分），最后一個(gè)slide在鍵盤(pán)或鼠標(biāo)滾動(dòng)時(shí)可能會(huì)直接跳到倒數(shù)第三個(gè)slide，
//此時(shí)可以手動(dòng)設(shè)置activeIndex解決，如下
  onTransitionEnd: function(swiper){
      if(swiper.progress==1){
          swiper.activeIndex=swiper.slides.length-1
      }
          }
})

slide的切換效果，默認(rèn)為"slide"（位移切換），可設(shè)置為"fade"（淡入）"cube"（方塊）"coverflow"（3d流）"flip"（3d翻轉(zhuǎn)）。

//css
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #fff;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 700px;
        height: 100%;
    }
    .swiper-slide {
        font-size: 18px;
        height: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 30px;
        font-size:13px;font-family:microsoft yahei; line-height:1.8;
    }
    p{
    
        margin-bottom:1em;
    }

//html
    

        

            

               
無(wú)限多的內(nèi)容無(wú)限多的內(nèi)容無(wú)限多的內(nèi)容無(wú)限多的內(nèi)容
            
        
        
        

    


//js
    var swiper = new Swiper(".swiper-container", {
        scrollbar: ".swiper-scrollbar",     //滾動(dòng)條的類(lèi)名
        direction: "vertical",      // 豎列排行
        slidesPerView: "auto",      // 可同時(shí)展示多少個(gè) slide 
        mousewheelControl: true,    //鼠標(biāo)滾輪
        freeMode: true, // slide 是否貼合側(cè)邊
        roundLengths : true, //防止文字模糊
    });

獨(dú)立分頁(yè)元素，當(dāng)啟用（默認(rèn)）并且分頁(yè)元素的傳入值為字符串時(shí)，swiper會(huì)優(yōu)先查找子元素匹配這些元素?？蓱?yīng)用于分頁(yè)器，按鈕和滾動(dòng)條。

var mySwiper = new Swiper(".swiper-container",{
    pagination : ".swiper-pagination",
    uniqueNavElements :false,
})