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

    effect : 'cube', //   可設置為"fade"(淡入)"cube"(方塊)"coverflow"(3d流)"flip"(3d翻轉)
    cube: {                     // 這個是方塊效果  網頁上有個廣告效果
        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,   //設為true開啟圖片延遲加載,使preloadImages無效。  比較麻煩
    zoom : true,  //焦距功能:雙擊slide會放大,并且在手機端可雙指觸摸縮放。
    zoomMax :5,
    zoomMin :2,


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

})
(*^▽^*)MG小猪与狼客户端下载 安徽波克麻将下载安装苹果版本 火箭vs 亿客隆 广西快3开奖视频 陕西快乐10分最常出现 吉祥棋牌下载最新版 6603千炮捕鱼 天津11选五一定牛 湖北快三 快中彩走势图app 爱玩斗地主作弊软件 全民内蒙古麻将免费挂 优乐江西麻将手机版 老鹰vs公牛视频直播 上海十一选五玩法详解 安徽25选5开奖公告