立即注册 登录
召隆企博汇论坛 返回首页

liwp的个人空间 http://bbs.clogcn.com/?4 [收藏] [复制] [分享] [RSS]

日志

Swiper常用属性记录

已有 370 次阅读2019-12-29 20:18 |个人分类:前端js| 功能效果

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,    //支持css3displayfixebox布局

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;

})

 


路过

雷人

握手

鲜花

鸡蛋

评论 (0 个评论)

facelist

您需要登录后才可以评论 登录 | 立即注册

QQ|Archiver|手机版|小黑屋|召隆企博汇 ( 粤ICP备14061395号 )

GMT+8, 2025-1-20 20:00 , Processed in 0.021366 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

返回顶部