实现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,
}
});
swiper双向控制
最新推荐文章于 2022-12-20 11:12:10 发布