swiper 3D叠层轮播图

效果

截屏2021-08-30 上午10.09.07.png

//安装
npm install [email protected] --save -dev
//main.js
import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'
//template

//script data
    data() {
        return {
            list:[ 
                {img: require('@/assets/img/[email protected]'),path:'/about'},
                {img: require('@/assets/img/swipe/[email protected]')},
                {img: require('@/assets/img/swipe/[email protected]')},
                {img: require('@/assets/img/swipe/[email protected]')},
                {img: require('@/assets/img/swipe/[email protected]')},
                {img: require('@/assets/img/[email protected]')},
                {img: require('@/assets/img/swipe/tianzi2x.png')},
                {img: require('@/assets/img/swipe/shiliu2x.png')},
                {img: require('@/assets/img/swipe/[email protected]')},
            ],
        }
    },
    methods:{
        go(item) {
            if(item.path){
                this.$router.push(item.path)
            }
        }
    },
    mounted() {
        var mySwiper = new Swiper('.swiper-container', {
            pagination : '.swiper-pagination',
            paginationType : 'bullets',
            loop : true,
            // autoplay: 1000,//可选选项，自动滑动
            effect : 'coverflow',
            centeredSlides: true,
            coverflow: {
                rotate: 0,
                stretch: 200,
                depth: 100,
                modifier: 1,
                slideShadows : false
            },
            prevButton:'.left',
            nextButton:'.right',
        })
    }
//style

    .abs {
        .swiper-container {
            width: 4.3rem;
            .swiper-slide {
                opacity: .5;
                img {
                 width: 3.8rem;
                }
            }
            .swiper-slide-active {
                 opacity: 1;
            }
        }
    }
    .swiper-pagination {
        width: 6.5rem;
        margin-top: 1rem;
        /deep/.swiper-pagination-bullet {
            width: .16rem;
            height: .16rem;
            display: inline-block;
            border-radius: 100%;
            background: #B5B5B6;
            opacity: .65;
            margin-right: .16rem
        }
        /deep/.swiper-pagination-bullet-active {
        opacity: 1;
        background: #FFFFFF;
        }

    }