swiper双向控制

在这里插入图片描述
实现swiper双向控制
html部分
在这里插入图片描述
js部分
在这里插入图片描述
var galleryThumbs = new Swiper(’.gallery-thumbs’, {
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
// freeMode: true,
// watchSlidesVisibility: true,
// watchSlidesProgress: true
});
var mySwiper2 = new Swiper(’.gallery-top’, {
initialSlide :0,
loopedSlides:2,//在loop模式下使用slidesPerview:‘auto’,还需使用该参数设置所要用到的loop个数。
slidesPerView:‘auto’,//设置slider容器能够同时显示的slides数量(carousel模式)。另外,支持’auto’值,会根据容器container的宽度调整slides数目。
effect:‘coverflow’,//可以实现3D效果的轮播,
centeredSlides:true,//设定为true时,active slide会居中,而不是默认状态下的居左。
coverflow:{
rotate:0,//slide做3d旋转时Y轴的旋转角度。默认50。
stretch:100,//每个slide之间的拉伸值,越大slide靠得越紧。 默认0。
depth:150,//slide的位置深度。值越大z轴距离越远,看起来越小。 默认100。
modifier:1,//depth和rotate和stretch的倍率,相当于depthmodifier、rotatemodifier、stretch*modifier,值越大这三个参数的效果越明显。默认1。
},
observer:true,
observeParents:true,
thumbs: {
swiper: galleryThumbs,
}
});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值