• 小程序
  • 服务
  • 新媒体运营
  • bob软件小程序开发
  • 新店商新零售
  • 全网营销品牌网站建设
  • 案例
  • 网站案例
  • bob软件小程序案例
  • 系统定制案例
  • 新媒体案例
  • 新闻动态
  • 行业动态
  • 技术文章
  • 网站建设
  • 软件下载
  • 联系我们
  • 技术文章
    Swiper常用属性记录
    发布日期:2019-12-28 阅读次数:988 字体大小:
    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;
    
    })
  • 售前
    售后
    新零售
    代运营
  • 400-0558-020