1、前阶段有需求，要求走马灯card模式下item不重叠，去网上找了很多没有实现的，后来决定自己写一个方法实现，见效果：间距的话可以自己根据需求调整：
2、实现思路：走马灯为我们提供了一个change方法，该方法当幻灯片切换时触发，回调参数是目前激活的幻灯片的索引，原幻灯片的索引，我们可以通过该方法获取到当前索引，now为当前item索引，old为轮播上一个item的索引。
我们通过观察上图走马灯item的结构可以发现，其实它的item标签位置是固定的，
也就是说我们在循环的时候，赋值给标签的id属性也是确定的，
这样我们在循环item的时候为其动态的增加id值:id = item.id，（我这里的item.id是我后台配置的，你这里只要赋值唯一的值就可以）
这样我们结合上面获取到的索引，就可以知道正在轮播的item的id是什么以及上一个item和下一个item的id是具体的哪一个了。
通过当前轮播的item的id，就可以知道了正在轮播的item是哪一个，此时我们就可以在change方法中为每个item做偏移，将旁边的item偏移到我们想要的位置，这样就可以实现item的不重叠了。
3、实现代码：贴过去直接可以用
关键点：在走马灯组件中添加:id = item.id、ref="carousel"属性，并添加@change="carouselChange"方法。
<div id="app">
<div class="ecall_h_mid_con_m1-d1" @click.stop="stopAuto">
<template>
<el-carousel :interval="4000" type="card" @change="carouselChange" ref="carousel">
<el-carousel-item v-for="item in carouseData" :key="item.id" :id="item.id">
<img class="element-img" alt="" :src="item.url">
</el-carousel-item>
</el-carousel>
</template>
</div>
</div>
关键点：
- 在data中添加
carouseId:0 - 在mounted中初始化时就添加
this.setPY();设置偏移的方法 - 在method中每次change时去调用一次
this.setPY();方法
var vm = new Vue({
el:"#app",
data(){
return:{
carouseId: 0,
}
},
mounted:{
this.setPY();
},
methods:function(){
carouselChange:function(now,old){
/* console.log(now+"，"+old); */
this.carouseId = now;
this.setPY();
},
setPY:function(){
var _carouseId = this.carouseId;
if(_carouseId == 0){
$("#0").css("left","-15%");
$("#0").next().css("left","32%");
$("#0").next().next().css("left","-62%");
}else if(_carouseId == 1){
$("#1").css("left","-15%");
$("#1").prev().css("left","-62%");
$("#1").next().css("left","32%");
}else{
$("#2").css("left","-15%");
$("#2").prev().css("left","-62%");
$("#2").prev().prev().css("left","32%");
}
},
}
})
总结：通过观察每个item的标签位置是固定的，我们在初始化时为每个item设置一个唯一的id，通过走马灯提供的change方法，获取到当前轮播的item的id并进行判断就可以确定目前我们正在轮播的是哪一个轮播图，通过走马灯提供的prev和next获取到上一个和下一个轮播图，并将其进行做偏移处理即可实现轮播不重叠，需要注意的是，这里在mounted中要调用一次该方法，因为初始化以后我们就要将这种偏移做好，还有就是每次change的时候都要做一次偏移。