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

风掠过有空白

已于 2024-03-29 11:42:57 修改

阅读量412

点赞数 3

分类专栏：工作遇到的问题文章标签： vue.js 前端 javascript elementui

于 2024-03-29 11:41:27 首次发布

本文链接：https://blog.csdn.net/weixin_44056717/article/details/137139932

版权

工作遇到的问题专栏收录该内容

44 篇文章 0 订阅

订阅专栏

图示：

在这里插入图片描述

第一步：

 <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>