nuxt项目 使用swiper完成旋转木马轮播效果

npm install swiper@5.2.0 --save  

npm install vue-awesome-swiper@4.1.1 --save  

在plugins文件夹里新建vue-swiper.js文件

vue-swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

新建VueSwiper组件 （重点在于on里的内容）

 

<template>
    <div v-if="initStatus" v-swiper:mySwiper="swiperOption" :class="cusClass + ' swiperBox ' + swpName">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in list" :key="index">
                <img :src="$imgBaseSrc + item.pic" />
            </div>
        </div>
        <div class="swiper-button-prev">
            <i class="el-icon-arrow-left"></i>
        </div>
        <div class="swiper-button-next">
            <i class="el-icon-arrow-right"></i>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        list: {
            //banner数组
            type: Array,
            default: function () {
                return []
            }
        },
        cusClass: {
            //自定义类名
            type: String,
            default: ''
        },
        loop: {
            //是否循环
            type: Boolean,
            default: true
        },
        delay: {
            //间隔时间
            type: Number,
            default: 3000
        },
        spaceBetween: {
            //两个轮播的间隔
            type: Number,
            default: 0
        },
        slidesPerView: {
            //一页显示几个
            type: Number,
            default: 1
        },
        paginationType: {
            //导航点类型
            // 'bullets'  圆点（默认）
            // 'fraction'  分式 
            // 'progressbar'  进度条
            // 'custom' 自定义
            type: String,
            default: ''
        }
    },
    data() {
        return {
            initStatus: false,//初始化状态
            swpName: this.roundString(),//swiper的类名
            swiperOption: {},//swiper参数
        }
    },
    mounted() {
        let self = this;
        this.$nextTick(() => {
            this.swiperOption = {
                loop: self.loop,
                centeredSlides: true,
                slidesPerView: self.slidesPerView,//一页显示几个
                spaceBetween: self.spaceBetween,//间隔
                updateOnWindowResize: true,
                watchSlidesProgress: true,
                // noSwiping: true,
                // autoplay: {//自动轮播
                //     delay: self.delay,
                //     disableOnInteraction: false,//操作swiper后 自动轮播不会停止
                // },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                on: {
                    setTranslate: function () {
                        let slides = this.slides;
                        for (let i = 0; i < slides.length; i++) {
                            let slide = slides.eq(i)
                            let progress = slides[i].progress
                            // slide.html((100 - Math.abs(progress.toFixed(0))));// 看清楚progress是怎么变化的
                            slide.css({ 'opacity': '', 'background': '' });
                            slide.transform('');//清除样式
                            slide.transform('scale(' + (1 - Math.abs(progress.toFixed(0)) / 5) + ')');
                            slide.css({ 'z-index': (100 - Math.abs(progress.toFixed(0))) });
                        }
                    },
                    setTransition: function (transition) {
                        for (let i = 0; i < this.slides.length; i++) {
                            let slide = this.slides.eq(i)
                            slide.transition(transition);
                        }
                    },
                }
            }
            this.initStatus = true;//渲染swiper
        })
    },
    methods: {
        roundString() {
            //生成随机字符串
            let str = "";
            let chars = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
            chars.forEach(() => {
                str += chars[Math.ceil(Math.random() * 25)]
            });
            return str;
        },
    }
}
</script>
<style lang="scss" scoped>
.swiperBox {
    .swiper-slide {
        position: relative;
        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: 50% 50%;
        }
    }
}
</style>

组件的使用（如果只是一屏3张图的话可以考虑只修改css样式）

<template>
    <div class="review-content">
        <vue-swiper :list="list" :slidesPerView="5"></vue-swiper>
    </div>  
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.review-content {
    width: 1200px;
    height: 500px;
    position: relative;
    .swiperBox {
        height: 500px;
        width: 1000px;
        position: static;
        &::v-deep {
            .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;
                height: 500px;
                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
                transition-property: all;
                img {
                    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
                    width: 500px;
                    height: 500px;
                    border-radius: 4px;
                }
            }
            .swiper-slide-active {
                .mask {
                    display: none;
                }
            }

            .swiper-button-prev,.swiper-button-next {
                position: absolute;
                width: 34px;
                height: 64px;
                line-height: 64px;
                background: rgba(209, 209, 209, 0.5);
                border-radius: 6px;
                font-size: 22px;
                color: rgba(255, 255, 255, 0.5);
                top: 50%;
            }

            .swiper-button-prev:after,.swiper-button-next:after {
                content: "";
            }

            .swiper-button-prev {
                left: 0px;
            }

            .swiper-button-next {
                right: 0px;
            }

            .swiper-button-prev:hover,.swiper-button-next:hover {
                background: rgba(209, 209, 209);
                color: rgba(255, 255, 255);
            }
        }
    }
}
</style>