vue+element实现自定义轮播图效果

一、
1.先安装Element UI，在element.js里面引入Element UI 轮播图组件并全局注册

import Vue from 'vue'
import{Carousel，CarouseLItem}from "element-ui"

Vue.use(Carousel)
Vue.use（CarouseLItem）
2.在demo.vue中导入轮播图结构样式和行为
结构

样式 ....

二、方式二

点击查看代码

<template>
    <div>
         <el-carousel :interval="5000" height="36rem" @change="changeImg" indicator-position="outside">
            <el-carousel-item v-for="(item,index) in images" :key="index">
            <el-image
                :class="className"
                style="width:100%; height:100%"
                :src="item.idView"
                fit="fit"></el-image>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
<script>
export default {
    name: "Index",
    data() {
        return {
            images: [
                {id: 0, idView: require('../assets/homeImages/1.png')},
                {id: 1, idView: require('../assets/homeImages/2.jpg')},
                {id: 2, idView: require('../assets/homeImages/3.jpg')},
                {id: 3, idView: require('../assets/homeImages/4.jpg')},
                {id: 4, idView: require('../assets/homeImages/5.jpg')},
            ],
            className: "",
        }
    },
    mounted() {
        this.className = "lun-img-two";
        setTimeout(() => {
            this.className = "lun-img";
        }, 300);
    },
    methods: {
        changeImg: function (e) {
            this.className = "lun-img-two";
            setTimeout(() => {
                this.className = "lun-img";
            }, 300);
        }
    }
}
</script>
<style scoped>
    .lun-img {
        transition: all 4s;
        transform: scale(1.5);
    }
    .lun-img-two {
        transform: scale(1);
    }
    .el-carousel__item.is-animating {
        transition: transform 1s ease-in-out;
    }
</style>