swiper.js实现叠加轮播效果

文档：

• swiperjs https://swiperjs.com/

在线demo:

• https://mouday.github.io/front-end-demo/swiperjs.html

实现源码

    
    
    
    swiper叠加轮播图



    



    
        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 外层容器 */
        .swiper {
            width: 600px;
            height: 300px;
        }

        /* 轮播项 */
        .swiper .swiper-slide {
            width: 80%;
            height: 100%;

            font-size: 32px;
            font-weight: 500;
            color: #ffffff;

            /* 文字垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 色彩来源：https://color.uisdc.com/ */
        .swiper .swiper-slide-1 {
            background-color: #425066;
        }

        .swiper .swiper-slide-2 {
            background-color: #8d4bbb;
        }

        .swiper .swiper-slide-3 {
            background-color: #9d2933;
        }

        .swiper .swiper-slide-4 {
            background-color: #003371;
        }

        .swiper .swiper-slide-5 {
            background-color: #4c8dae;
        }
    


    
        
        
            
            1
            2
            3
            4
            5
        
        
        

        
        
        

        
        
    


    

    

        const swiper = new Swiper('.swiper', {
            effect: 'coverflow',
            loop: true,
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            coverflowEffect: {
                rotate: 0,
                stretch: 0,
                depth: 500,
                modifier: 1,
                slideShadows: false,
            },
            pagination: {
                el: '.swiper-pagination',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });

        // 监听改变事件
        swiper.on('slideChange', (e) => {
            console.log(e.realIndex);
        });
    

参考： swiper叠加轮播效果 （含源码） - 案例篇