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>
相关推荐
Aric_Jones8 小时前
JavaScript 从入门到精通:完整语法指南
开发语言·javascript·ecmascript
岱宗夫up8 小时前
FastAPI入门(上篇):快速构建高性能Python Web API
开发语言·前端·python·fastapi
紫陌涵光8 小时前
112. 路径总和
java·前端·算法
漠月瑾-西安8 小时前
CVE-2025-55182漏洞解析:你的React项目安全吗?
前端·安全·react.js
No丶slovenly9 小时前
flutter笔记-输入框
前端·笔记·flutter
国产化创客9 小时前
ESP32+Web实现智能气象站
前端·物联网·智能家居·智能硬件
coderYYY10 小时前
VSCode终端启动报错
前端·ide·vscode·npm·编辑器
西门吹-禅10 小时前
文本搜索node js--meilisearch
开发语言·javascript·ecmascript
tod11311 小时前
Redis 数据类型与 C++ 客户端实践指南(redis-plus-plus)
前端·c++·redis·bootstrap·html
Sylvia33.11 小时前
火星数据:棒球数据API
java·前端·人工智能