Element.ui [Walking Lantern] Realize the item and the corresponding text in a carousel, click to switch each other

Element.ui realizes that the matching text corresponding to the item is customized outside the revolving lantern component and rotated together. When the text is clicked, the corresponding item is rotated to the current position, and the corresponding text is also selected when the item is clicked.

1. As shown in the figure below, the corresponding children's counseling carousel is just clicked on when the child counseling is clicked, and when we click on the other items below, the corresponding text above will also be selected in response.

2. Implementation ideas:

• Item corresponds to word processing: define a variable to carouseIdrecord the corresponding id of the item that is being rotated, and loop to determine whether all items are carouseIdequal. If the item is equal, the corresponding item is being rotated. Just modify the style and add a chooseCard to each text. Method, in this method, setActiveItem(index)the item corresponding to the manual switching text provided by the revolving lantern is called as being in carousel, so that the item carousel corresponding to the clicked text is realized.
• Item processing: loop the item, and assign the id of the item that is being rotated to carouseId in the change method provided by the revolving lantern every time it is rotated, so as to ensure that the corresponding text can be synchronized every time it is switched .

3. Complete code:

<div id="app">
<template v-for="(item,index) in carouseData">
	<span @click.stop="chooseCard(index)" :class="carouseId == item.id ? '样式1' : '样式2'">{
   
   {item.title}}</span>
</template>
<img class="" alt="" src="./img/gd.png" @click="">

<template>
	<el-carousel :interval="4000" type="card" ref="carousel">
		<el-carousel-item v-for="item in carouseData" :key="item.id">
			<img alt="" :src="item.url" @click="">
		</el-carousel-item>
	</el-carousel>
</template>
</div>

Note: It should be noted that the ref="carousel"attribute must be defined above . The following will obtain the dom element according to the attribute and call the setActiveItem method provided by the revolving lantern to switch the item.

The following data is hard-coded, or it can be dynamically obtained from the interface and assigned to the carouseData array.

var vm = new Vue({
    
    
	el:"#app",
	data(){
    
    
		return:{
    
    
			carouseId:0,
			carouseData:[
				{
    
    url:'./img/1598410148507.png',title:'妇科咨询',id:0},
				{
    
    url:'./img/1598410249329.png',title:'儿童咨询',id:1},
				{
    
    url:'./img/1598410106204.png',title:'中医咨询',id:2}
			],
		}
	},
	methods:function(){
    
    
		chooseCard:function(index){
    
    
			this.$refs.carousel.setActiveItem(index);
		},
	}
});