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>
相关推荐
天若有情6732 分钟前
从语法拆分到用户感知:我的前端认知重构之路
前端·javascript
_OP_CHEN5 分钟前
【前端开发之CSS】(五)CSS 盒模型深度解析:从基础到实战,掌控页面布局核心
前端·css·html·盒模型·页面开发·页面布局·页面美化
摘星编程8 分钟前
用React Native开发OpenHarmony应用:DrawerNavigation侧滑关闭
javascript·react native·react.js
阿蒙Amon9 分钟前
TypeScript学习-第2章:基础类型
javascript·学习·typescript
轩情吖9 分钟前
Qt多元素控件之QListWidget
开发语言·前端·c++·qt·控件·qlistwidget·桌面级
Yaru1111 分钟前
伪3D地图和3D饼图实现
前端·3d·echarts
测试_AI_一辰14 分钟前
Agent & RAG 测试工程 02:RAG 从最小闭环到可信
开发语言·前端·人工智能·github·ai编程
DreamOneDay18 分钟前
MapLibre GL JS加载ArcGis Terrain3D地形
javascript·3d·arcgis·maplibre·terrain3d
_xaboy23 分钟前
开源Vue组件-动态表单组件设计,告别重复CRUD,JSON一键生成表单
前端·vue.js·低代码·开源·json
POLITE329 分钟前
Leetcode 236. 二叉树的最近公共祖先 (Day 17) JavaScript
linux·javascript·leetcode