vue+elementui Carousel 走马灯 以四宫格的布局方式一次轮播4张图片

效果

vue

<el-carousel :loop="false" :autoplay="false" height="700px" width='500px' ref="remarkCarusel"  indicator-position="outside" @change="sildeImg"><el-carousel-item class="el-car-item" v-for="(list, index) in dataList" :key="index"><div v-for="(item, index1) in items" :key="index1" :class="item.class"><img v-for="(imgList,index2) in list" v-if="index1 == index2" :key="index2" :src="imgList.url" :alt="imgList.title"  style="height: 100%;width: 100%;margin-right: 20px;"/> <div v-show="total>0"style="right: 10%; top: 10%; color: #000; position: absolute; z-index: 100; height: 25px; background-color: rgba(255, 255, 255, 0.5);"><table style="background: none"><tr><th id="pictureLabel" class="myclass" v-if="list[index1] != null">&nbsp;&nbsp;标题:{{list[index1].title}}</th></tr></table></div><div v-show="total>0"style="right: 1%; top: 1%; color: #000; position: absolute; z-index: 100; height: 25px;"><el-button v-if="list[index1] != null" size="mini" round @click="handleEdit(list[index1])">编辑</el-button></div></div></el-carousel-item></el-carousel>

js

data() {return{items: [  { content: 'Div 1', class: 'class1' },  { content: 'Div 2', class: 'class2' },  { content: 'Div 3', class: 'class3' }, { content: 'Div 4', class: 'class4' },  ] ,dataList: [{"title": "标题1","url": "https://img2.baidu.com/it/u=1415816293,2911087723&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=338"},{"title": "标题2","url": "https://img.mp.itc.cn/upload/20170612/72d37f9f668549839d8cdb5d787f7ec3_th.jpg"},{"title": "标题3","url": "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0509%2F0a525bbaj00rblcqi003lc000p000iwm.jpg&thumbnail=660x2147483647&quality=80&type=jpg"},{"title": "标题4","url": "https://img2.baidu.com/it/u=4213943477,3171054669&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=588"},{"title": "标题5","url": "https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"},{"title": "标题6","url": "https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"},],}},

处理后端返回的数据

getDataSource() {let newDataList = []let current = 0if(this.dataList && this.dataList.length>0){for(let i=0;i<=this.dataList.length-1;i++){if(i%4 !== 0 || i === 0 ){if(!newDataList[current]){newDataList.push([this.dataList[i]])}else{newDataList[current].push(this.dataList[i])}}else{current++newDataList.push([this.dataList[i]])}}}this.dataList = [...newDataList]this.$refs.remarkCarusel.setActiveItem(0);},

css

.class1 {  position: absolute; top: 0px; left: 100px;height: 350px;width: 815px; 
}  
.class2 {  position: absolute; top: 0px; left: 930px;height: 350px;width: 815px;  
}  
.class3 {  position: absolute; top: 360px; left: 100px;height: 350px;width: 815px; 
} 
.class4 {  position: absolute; top: 360px; left: 930px;height: 350px;width: 815px; 
} 
.myclass{background: none; border: none; text-align: left; cursor: default
}
.el-carousel__item{z-index: -1;
}.el-carousel__item.is-active{z-index: 2;
}/* Carousel 走马灯 指示器样式 将指示器的显示位置设置在容器外部：indicator-position属性定义了指示器的位置。设置为outside则会显示在外部。
*/
::v-deep .el-carousel__indicators {left: unset;transform: unset;right: 46%;bottom: 1%;
}
::v-deep .el-carousel__button {width: 10px;height: 10px;border: none;border-radius: 50%;background-color: rgba(0, 0, 0, 0.2);
}
::v-deep .is-active .el-carousel__button {background: #3f8ec8;
}::v-deep .el-carousel__container {height: 100%;
}

参考

vue+element-ui carousel走马灯一次轮播(显示)指定张数图片
vue+elementui Carousel 走马灯 一次轮播4张图片
Vue + element 点击事件 修改走马灯的播放索引
Vue ElementUI el-carousel 走马灯 指示灯样式修改

出现闪烁问题解决

element ui 走马灯问题