Element Plus 走马灯怎么设置自动轮播不生效？

西门长春提问于 2026-03-05 09:56:21 阅读 3

组件

我用 Element Plus 的 Carousel 组件，想让它自动轮播，但加了 autoplay 属性后完全没反应，还是得手动点。是不是还要配其他参数？我试过把 interval 设成 2000，也没用。

下面是我的代码：

<el-carousel height="200px" autoplay :interval="2000">
  <el-carousel-item v-for="item in banners" :key="item.id">
    <img :src="item.url" alt="" style="width:100%;height:100%;object-fit:cover" />
  </el-carousel-item>
</el-carousel>

我来解答赞 4 收藏

反馈

1 条解答

Prog.爱琴 Lv1

老哥你这个写法看着没啥问题啊，Element Plus文档里确实是这么写的。我猜你可能漏了个小细节：autoplay属性要加冒号绑定，写成:autoplay="true"或者直接autoplay都行。

我本地跑了下，标准写法应该是这样的：

<el-carousel height="200px" :autoplay="true" :interval="2000">

  <el-carousel-item v-for="item in 4" :key="item">

    <h3>{{ item }}</h3>gt;

  </el-carousel-item>

</el-carousel>

另外检查下你的banners数据是不是空数组？如果是空的话确实不会轮播。这种坑我踩过好几次了，文档里其实写了但很容易忽略。

2026-03-05 10:08