swiper 嵌套

最新推荐文章于 2023-12-04 10:58:33 发布

a72039

最新推荐文章于 2023-12-04 10:58:33 发布

阅读量1.4k

点赞数 1

文章标签：前端框架 Powered by 金山文档

本文链接：https://blog.csdn.net/a72039/article/details/128801935

版权

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

  <!-- 定义父swiper -->
    <div class="swiper-container first-one">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><p>我是父亲swiper的第一个slide</p></div>
            <div class="swiper-slide"><p>我是父亲swiper的第二个slide</p></div>
            <div class="swiper-slide"><p>我是父亲swiper的第三个slide</p></div>
            <div class="swiper-slide">
                <p>我是父亲swiper的第四个slide</p>
                <!-- 定义嵌套的子swipe -->
                <div class="swiper-container second-one">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><p>我是儿子swiper的第一个slide</p></div>
                        <div class="swiper-slide"><p>我是儿子swiper的第二个slide</p></div>
                        <div class="swiper-slide"><p>我是儿子swiper的第三个slide</p></div>
                        <div class="swiper-slide"><p>我是儿子swiper的第四个slide</p></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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的切换。
        });