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>
相关推荐
小智社群8 分钟前
贝壳获取小区的名称
开发语言·前端·javascript
Ferries24 分钟前
《从前端到 Agent》系列|03:应用层-RAG(检索增强生成,Retrieval-Augmented Generation)
前端·人工智能·机器学习
Jessica_Lee29 分钟前
Openclaw智能体终止机制
javascript
米丘31 分钟前
Connect 深度解析:Node.js 中间件框架的基石
javascript·http·node.js
饺子不吃醋31 分钟前
执行上下文:变量提升、作用域与 this 底层机制
javascript
菲利普马洛33 分钟前
记一次主题闪烁问题
前端·css·react.js
谁在黄金彼岸35 分钟前
nvm for windows之死:别再被这个“过时工具”耽误开发
前端
汉堡大王952736 分钟前
为了搞懂 Promise 源码,我重写了 MiniPromise
前端·javascript
臧玉波36 分钟前
一文读懂 JS 原型链
javascript
llq_35036 分钟前
使用 devServer Proxy 本地开发 POST 请求跨域报错问题及解决方案
前端