柚子快报激活码778899分享：前端框架 swiper 嵌套

柚子快报激活码778899分享：前端框架 swiper 嵌套

http://www.51969.com/

有3d样式父swiper 嵌套子swiper ，做法如下:

js:

var first_swiper = new Swiper('.first-one', {

loop:true,

effect: 'coverflow', 

grabCursor: true,

centeredSlides: true,

centeredSlidesBounds: true,

observer:true,

slidesPerView: 2.7,

spaceBetween : 80,

coverflowEffect: {

rotate: 20,

stretch: 3,

depth: 200,

modifier: 1,

slideShadows : true,

},

});

var second_swiper=new Swiper('.second-one',{

grabCursor: true,

loop:true,

observer:true,

spaceBetween : 10,

nested:true, //用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换。

});

效果如图：

var first_swiper = new Swiper('.first-one', {

loop:true,

effect: 'coverflow',//设置Slide的切换效果 3d

grabCursor: true, //鼠标移入为抓手状态

centeredSlides: true, //居中幻灯片

observer:true,//开启动态检查器，监测swiper和slide

slidesPerView: 3,//设置slider容器能够同时显示的slides数量

spaceBetween : 80,//slide之间的距离（单位px）

coverflowEffect: {

rotate: 30, //Y轴的旋转角度

stretch: 0, //每个slide之间的拉伸值，越大slide靠得越紧

depth: 100, //slide的位置深度。值越大z轴距离越远，看起来越小

modifier: 1.5,//倍率 值越大这三个参数的效果越明显

slideShadows : true,//是否开启阴影

},

            nested:true, //用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换。

});

柚子快报激活码778899分享：前端框架 swiper 嵌套

http://www.51969.com/

查看原文