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 = 0
		if(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 走马灯问题