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

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


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

})