element跑马灯/轮播图,第一页隐藏左边按钮,最后一页隐藏右边按钮(vue 开箱即用)

图示:


第一步:

复制代码
 <el-carousel :class="changeIndex==0?'leftBtnNone':changeIndex==imgDataList.length-1? 'rightBtnNone':''"   height="546px" :autoplay="false"  @change="changeNext">
			<el-carousel-item v-for="(item,index) in imgDataList" :key="index">
                                       //内容
                   
                </el-carousel-item>
</el-carousel>

第二步:

复制代码
data() {
        return {
            imgDataList: [],
            changeIndex:'   '
        }
    },

第三步

复制代码
methods:{
		changeNext(e){
            this.changeIndex=e
        },

}

第四步

复制代码
<style scoped>
/deep/.leftBtnNone {
    .el-carousel__arrow--left {
        display: none !important;
    }
}
/deep/.rightBtnNone {
    .el-carousel__arrow--right {
        display: none !important;
    }
}
</style>
相关推荐
Yzw3 分钟前
当vue.diff遇上了扩展运算符(...)
前端
前端不开发3 分钟前
在任意网页里“召唤”一个火柴人:一次有趣的 JavaScript Hack
前端·javascript
UI设计兰亭妙微9 分钟前
资金运营管理监控系统交互设计、UI设计及VUE开发
vue.js·ui·交互
王子肥波10 分钟前
🚀 TabTab Admin:一款现代化的 Vue 3 后台管理系统模板
vue.js
whatever who cares11 分钟前
Java Web 架构全组件详解
java·前端·架构
DevDengChao23 分钟前
[Aliyun] [FC] 如何使用 website-fc-serve 插件部署静态网站
前端·后端
前端拿破轮26 分钟前
利用Github Page + Hexo 搭建专属的个人网站(一)
前端·人工智能·后端
q1cheng38 分钟前
基于Spring Boot + Vue项目online_learn的用户登录认证全流程分析
前端
大时光39 分钟前
gsap 配置解读 --2
前端
万岳科技程序员小金1 小时前
AI数字人小程序源码开发全流程实战:前端交互+后端算法部署指南
前端·人工智能·软件开发·ai数字人小程序·ai数字人系统源码·ai数字人软件开发·ai数字人平台搭建