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

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

组件

我用 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>

我来解答赞 14 收藏

反馈

2 条解答

迷人的艺馨 Lv1

这个问题跟 WordPress 没关系，但既然你问了就说两句。

Element Plus 的 Carousel 默认就是自动轮播的，autoplay 属性实际上是控制是否自动播放，默认为 true。你现在加了 autoplay 没反应，大概率是版本问题——你用的是哪个版本的 Element Plus？

如果是 2.3.8 之后的版本，属性改成了 indicator 和 trigger 这些新写法。你可以试试直接去掉 autoplay 和 :interval，看看默认是否就自动轮播了。

如果默认也不行，检查一下包裹 el-carousel 的父容器有没有设置固定宽度或者 overflow: hidden，有时候 CSS 冲突会导致轮播失效。

还有一个常见坑：如果你的 banners 数组是异步获取的（比如接口返回的），在数据还没加载完就渲染了 carousel，也会导致轮播出问题。解决办法是用 v-if 等数据加载完再渲染：

<el-carousel v-if="banners.length" height="200px" :interval="2000">

试试看，先确认数据加载时机。

2026-03-10 21:08

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