技術(shù)文章
Swiper常用屬性記錄
發(fā)布日期:2019-12-28 閱讀次數(shù):4600 字體大?。?a href="javascript:;" onclick="ChangeFontSize('content',16)">大
var swiper = new Swiper('.swiper-container', {
    direction: 'horizontal',  //默認(rèn)是橫向,可以設(shè)置豎向vertical    Slides的滑動方向,可設(shè)置水平(horizontal)或垂直(vertical)。
    history: 'love',          //開始瀏覽器前進后退 沒什么用
    data:1,
    pagination: '.swiper-pagination',  //分頁器
    paginationClickable :true,    // 分液器換圖
    loop:true,                         //無限循環(huán)
    nextButton: '.swiper-button-next',//前進后退按鈕
    prevButton: '.swiper-button-prev',
    autoplay: 1000,                 // 自動輪播
    initialSlide :1,              // 初始化跳到第幾個輪播圖
    speed:800,                      // 運動緩慢
    autoplayDisableOnInteraction : true,   //停止自動輪播
    grabCursor : true,              //抓手形狀
    parallax : true,    //如需要開啟視差效果(相對父元素移動),設(shè)置為true并在所需要的元素上增加data-        swiper-parallax屬性。
    hashnav:true,         //  今天研究到這   這個沒實現(xiàn)
    hashnavWatchState:true,  //和上面的關(guān)聯(lián)  沒明白
    replaceState:true,        //代替上面兩個
    setWrapperSize :true,    //支持css3display:fixebox布局
    virtualTranslate : true,   //讓輪播停止運行 其他正常
    nextButton: '.swiper-button-next',
    width : 800, //你的slide寬度  這個參數(shù)會使自適應(yīng)失效。高度也是
    //  全屏  width : window.innerWidth,
    roundLengths : true, // 當(dāng)你設(shè)定slide寬為76%時,則計算出來結(jié)果為1094.4,開啟后寬度取整數(shù)1094
    autoHeight: true, //高度隨內(nèi)容變化
    nested:true,         // 父元素和子元素嵌套  相當(dāng)于兩個swiper
    freeMode : true,     //這個參數(shù)為true后,滑到哪里就是哪里
    freeModeMomentumBounceRatio : 5,  //反彈 值越大   依賴上面那個
    slidesOffsetBefore : 100,      //設(shè)置與左邊框間隔距離

    effect : 'cube', //   可設(shè)置為"fade"(淡入)"cube"(方塊)"coverflow"(3d流)"flip"(3d翻轉(zhuǎn))
    cube: {                     // 這個是方塊效果  網(wǎng)頁上有個廣告效果
        slideShadows: true,
        shadow: true,
        shadowOffset: 150,
        shadowScale: 0.8
    },
    preventLinksPropagation : false,  //阻止click冒泡。拖動Swiper時阻止click事件。
    coverflow: {
       rotate: 30,
       stretch: 10,
       depth: 60,
       modifier: 2,
       slideShadows : true
     }
    slidesPerView: 3, // 下面這兩個只有在3d留用到
    centeredSlides: true,
    lazyLoading : true,   //設(shè)為true開啟圖片延遲加載,使preloadImages無效。  比較麻煩
    zoom : true,  //焦距功能:雙擊slide會放大,并且在手機端可雙指觸摸縮放。
    zoomMax :5,
    zoomMin :2,


var Swiper1 = new Swiper('#swiper-container1',{   設(shè)置這個后兩個swiper可實現(xiàn)方向倒轉(zhuǎn)  實用 })
var Swiper2 = new Swiper('#swiper-container2',{})
// Swiper1.params.control = Swiper2;
// Swiper1.params.controlInverse=true;

})