swiper 3D叠层轮播图

效果

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

//安装
npm install swiper@3.4.2 --save -dev
//main.js
import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'
//template
<template>
    <div class="bg-wrap">
        <div class="abs flex-cc">
        <img class="left" src="@/assets/img/left@2x.png" alt="">
        <div class="swiper-container">
            <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in list" :key="index">
                <div @click="go(item)">
                    <img :src="item.img" alt="">
                </div>
            </div>
            </div>
        </div>
        <img class="right" src="@/assets/img/right@2x.png" alt="">
        </div>
        <div class="swiper-pagination"></div>
    </div>
</template>
//script data
    data() {
        return {
            list:[ 
                {img: require('@/assets/img/waitan@2x.png'),path:'/about'},
                {img: require('@/assets/img/swipe/nanjing@2x.png')},
                {img: require('@/assets/img/swipe/huaihai@2x.png')},
                {img: require('@/assets/img/swipe/tiandi@2x.png')},
                {img: require('@/assets/img/swipe/yuyuan@2x.png')},
                {img: require('@/assets/img/renmin@2x.png')},
                {img: require('@/assets/img/swipe/tianzi2x.png')},
                {img: require('@/assets/img/swipe/shiliu2x.png')},
                {img: require('@/assets/img/swipe/yanyi@2x.png')},
            ],
        }
    },
    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;
        }

    }