首页elementui怎么实现多张图片轮播图

elementui怎么实现多张图片轮播图

时间: 2023-07-30 22:07:48 浏览: 110

要实现多张图片的轮播图，您可以使用Element UI的轮播组件（Carousel）来完成。以下是一个示例代码，展示了如何使用Element UI实现多张图片的轮播图： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>  <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <el-carousel :autoplay="true" :interval="4000"> <el-carousel-item v-for="(item, index) in carouselItems" :key="index"> <img :src="item.imageUrl" alt=""> </el-carousel-item> </el-carousel> </div> <script> new Vue({ el: '#app', data() { return { carouselItems: [ { imageUrl: 'image1.jpg' }, { imageUrl: 'image2.jpg' }, { imageUrl: 'image3.jpg' } ] } } }); </script> </body> </html> ``` 在这个示例中，我们使用了`<el-carousel>`来创建轮播图，并通过`:autoplay="true"`设置自动播放，`:interval="4000"`设置轮播间隔为4秒。在`<el-carousel>`内部，我们使用`v-for`指令遍历`carouselItems`数组，并将每个元素渲染为一个`<el-carousel-item>`，通过`:src`绑定每个图片的地址。您只需要将`carouselItems`数组中的图片地址替换为您自己的图片地址即可实现多张图片的轮播图。

阅读全文