ElementUi Carousel 走马灯,自定义el-carousel箭头左右切换【轮播图】

最新推荐文章于 2025-04-28 16:14:46 发布

outside-R

最新推荐文章于 2025-04-28 16:14:46 发布

阅读量3.5k

点赞数

分类专栏： vue基础学习文章标签： elementui vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_45044349/article/details/123369335

版权

本文档介绍了如何在ElementUi的Carousel组件中实现自定义的箭头控制轮播图功能，不使用自动轮播和底部指示器。通过设置autoplay、arrow和indicator-position属性，并结合ref调用方法进行手动切换。

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

效果图
在这里插入图片描述

代码1：
可引入网址链接
网址拼接字符串：a1.jpg【随便写到】

<el-carousel trigger="click" height="320px">
      <el-carousel-item v-for="item in 4" :key="item">
        <img :src="`www.baidu.com/a${item}.jpg`" alt="" class="banner">
        
      </el-carousel-item>
    </el-carousel>

代码2：
引用文档

<div class="leftArrow">
      <img src="@/assets/img/survey/boardItem/left.png" v-if="currentPage" @click="arrowClick('left')" />
    </div>
 
<el-carousel  :autoplay="false" height="72px" arrow=