swiper 5张卡片轮播图实现效果

直接上代码：

<!-- 轮播 -->

<template>

　　<div class="swiper-out">

     　　<swiper :options="swiperOption">

          　　<swiper-slide v-for="(item, index) in 5" data-index="index" :key="index">

                　　<div class="swiper-item">

                    　　<div class="swiper-img">

                        　　<img :src="imgUrl" width="400px" alt="">

                    　　</div>

                　　</div>

          　　</swiper-slide>

    　　</swiper>

　　</div>

</template>

<!-- js -->

<script>

    import sortBox from '../aacomponents/sortBox/sortBox.vue'

    import swiperBanner from '../aacomponents/swiper/swiperBanner.vue'

    export default {

        name: 'EnterpriseLicense',

        components: { sortBox,swiperBanner },

        props: [],

        data() {

            return {

                bannerData:[ require('../../../assets/templateDefault05/banner5.png')],//banner数据

                imgUrl:require('../../../assets/templateDefault05/img2.png'),

                //轮播

                swiperOption: {

                    loop: true, // 循环模式选项

                    autoplay: true,//自动循环

                    slidesPerView: 3.8, //设置slider容器能够同时显示的slides数量(carousel模式)。

                    spaceBetween: -160, //在slide之间设置距离（单位px）。

                    centeredSlides: true, //设置活动块居中

                },

                parVuex:{},//栏目对象

            }

        },

        created() {

            this.$store.dispatch('index/is_Cur', 'CompanyLicenses');

         },

        methods: {

             

        }

    }

</script>

<!-- css -->

<style scoped>

    .swiper-slide {

        text-align: center;

        height: 76%;

        display: flex;

        justify-content: center;

        align-items: center;

        transition: 300ms;

        transform: scale(0.6);

    }

    .swiper-slide-active,

    .swiper-slide-duplicate-active {

        transform: scale(1);

    }

    .swiper-slide-next{

        transform: scale(0.8);

        z-index: 998 !important;

    }

    .swiper-slide-prev{

        transform: scale(0.8);

    }

    .swiper-slide-active {

        z-index: 999 !important;

    }

</style>