实现效果:
官网组件:https://element.eleme.cn/#/zh-CN/component/installation
<template> <el-carousel :interval="4000" type="card" height="200px"> <el-carousel-item v-for="(img, index) in imgArrag" :key="index"> <a href="#"> <img :src="img" alt="" width="100%" /> </a> <router-view></router-view> </el-carousel-item> </el-carousel> </template> <script> export default { data() { return { imgArrag: [ require("../static/003.jpg"), require("../static/004.jpg"), require("../static/005.jpg"), require("../static/006.jpg"), require("../static/007.jpg"), require("../static/008.jpg"), ], }; }, methods: {}, }; </script> <style> .el-carousel__item h3 { color: #475669; font-size: 14px; opacity: 0.75; line-height: 200px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n + 1) { background-color: #d3dce6; } </style>为什么要加 require 可见博客 https://blog.csdn.net/weixin_39031806/article/details/105445888
