1. There was a demand in the previous stage, requiring that the items in the revolving lantern card mode do not overlap. I went to find a lot of unrealized items on the Internet, and then decided to write a method to achieve it. See the effect: if the spacing is adjusted according to the needs
: Provide us with a changemethod, which is triggered when the slide is switched , the callback parameter is the index of the currently active slide, the index of the original slide , we can get the current index through this method, now is the current item index, old Index of the previous item for the carousel.
We can find by observing the structure of the revolving lantern item in the picture above, in fact, the position of its item label is fixed.
In other words, when we are looping, the id attribute assigned to the label is also determined.
In this way, we dynamically increase the id value for the item when looping it :id = item.id, (the item.id here is my background configuration, you only need to assign a unique value here)
In this way, by combining the index obtained above, we can know what the id of the item being rotated is and which is the specific id of the previous item and the next item.
Through the id of the item in the current carousel, we can know which item is in the carousel. At this time, we can offset each item in the change method to offset the next item to what we want Position, so that the items are not overlapping.
3. Implementation code: Paste it and use it directly
Key: in the revolving door assembly is added :id = item.id, ref="carousel"attributes, and add @change="carouselChange"method.
<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>
key point:
- Add in data
carouseId:0 - Add
this.setPY();a method to set the offset when initializing in mounted - Call the method every time you change in the
this.setPY();method
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%");
}
},
}
})
Summary: By observing that the label position of each item is fixed, we set a unique id for each item during initialization. Through the change method provided by the revolving lantern, the id of the current carousel item can be obtained and judged. Which carousel picture we are currently rotating, we can obtain the previous and next carousel pictures through the prev and next provided by the revolving lantern, and perform offset processing to realize that the carousel does not overlap. It needs attention. Yes, this method needs to be called once in mounted here, because we have to do this offset after initialization, and we need to do an offset every time it changes.