elementui el-carousel轮播图

最新推荐文章于 2025-06-27 17:45:38 发布

原创最新推荐文章于 2025-06-27 17:45:38 发布 · 7.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui #el-carousel

博客可能围绕Vue和ElementUI展开，重点涉及el - carousel组件。Vue是前端开发框架，ElementUI是基于Vue的组件库，el - carousel为其中的轮播组件，可用于创建轮播效果，在前端页面展示中较为常用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-carousel trigger="click"
                     :autoplay="false"
                     height="500px"
                     @change="handChange" ref="carousel">
          <el-carousel-item v-for="item in bigScreen.images"
                            :key="item.name" :name="item.name">
            <img style="width:100%;height:100%;" :src="item.url"/>
          </el-carousel-item>
</el-carousel>

bigScreen: {
        images: [
          {
            name: 'bigScreen01',
            url: '/images/dp01.jpg'
          },
          {
            name: 'bigScreen02',
            url: '/images/dp04.png'
          },
          {
            name: 'bigScreen03',
            url: '/images/dp03.jpg'
          },
          {
            name: 'bigScreen05',
            url: '/images/dp05.png'
          },
          {
            name: 'bigScreen06',
            url: '/images/dp06.png'
          },
          {
            name: 'bigScreen07',
            url: '/images/dp07.png'
          }
        ]
},

handChange (index) {
  console.log(index)
}