Problem background:
When using the revolving lantern Carousel of element ui. It is found that when the number of carousels is 2, the direction of the loop operation is to switch back and forth between two containers, rather than loop switching in a single direction.
Solutions:
When the number of content is greater than 2, it can be displayed normally. We can directly copy a copy of the current data and perform the current loop operation, so that the problem can be solved.
But when we enable the lower indicator, there will be 4 indicators, so there will be problems. We can judge whether it belongs to the first set of data or the second set of data, and display or hide the lower ones through the class name Indicator, this method is only for the direction problem where the two contents appear.
Solution:
<div :class="[{ 'loopTwoImg': imgStatus }, { 'loopOneImg': !imgStatus }]">
<el-carousel @change="carouselChange" indicatorPosition="none" arrow="true" loop="true" indicator-position
trigger="click">
<template v-for="item in 2" :key="item">
<el-carousel-item>
<img @click="onOpenActivityPage" src="" />
</el-carousel-item>
<el-carousel-item>
<img @click="onOpenComputePage" src="" />
</el-carousel-item>
</template>
</el-carousel>
</div>
<script>
const state = reactive({
imgStatus: true
})
const carouselChange = (data) => {
if (data == 0 || data == 1) {
//当为第一组数据的时候，打开当前的指示器，隐藏第二组数据的指示器
state.imgStatus = true
} else {
//当为第二组数据的时候，打开当前的指示器，隐藏第一组数据的指示器
state.imgStatus = false
}
}
</script>
<style lang="less" scoped>
/deep/ .loopOneImg {
.el-carousel__indicators {
&>li:nth-child(1),
&>li:nth-child(2) {
display: none;
}
}
}
/deep/ .loopTwoImg {
.el-carousel__indicators {
&>li:nth-child(3),
&>li:nth-child(4) {
display: none;
}
}
}
</style>