vue3下el-carousel的card模式下设置item之间的间距

<el-carousel ref="refCarousel" class="wh100Per" :autoplay="false" :loop="true" type="card" arrow="never"
indicator-position="none" @change="priceChange">
<el-carousel-item v-for="(item,index) in list" :key="index" :id="item.id">

</el-carousel-item>
</el-carousel>

const list = ref([]);
const nowIndex = ref(0)
const refCarousel = ref()

const priceChange = (current: number, prev: number) => {
  nowIndex.value = current
setPY()
}
const setPY = () => {
let currentId = nowIndex.value;
const currentPrevCent = '-11%';
const currentCent = '0%';
const currentNextCent = '11%';
if (currentId === 0) {
if (list.value[list.value.length - 1]) {
setCarouselItemStyle(list.value[list.value.length - 1].id, currentPrevCent);
}
if (list.value[0]) {
setCarouselItemStyle(list.value[0].id, currentCent);
}
if (list.value[1]) {
setCarouselItemStyle(list.value[1].id, currentNextCent);
}
} else if (currentId === list.value.length - 1) {
if (list.value[0]) {
setCarouselItemStyle(list.value[0].id, currentNextCent);
}
if (list.value[currentId - 1]) {
setCarouselItemStyle(list.value[currentId - 1].id, currentPrevCent);
}
if (list.value[currentId]) {
setCarouselItemStyle(list.value[currentId].id, currentCent);
}
} else {
if (list.value[currentId - 1]) {
setCarouselItemStyle(list.value[currentId - 1].id, currentPrevCent);
}
if (list.value[currentId]) {
setCarouselItemStyle(list.value[currentId].id, currentCent);
}
if (list.value[currentId + 1]) {
setCarouselItemStyle(list.value[currentId + 1].id, currentNextCent);
}
}
}

/**
* 设置轮播图子项样式
* @param itemId 子项id
* @param leftValue 左边距
*/
const setCarouselItemStyle = (itemId: number, leftValue: string) => {
const item = refCarousel.value?.$el.querySelector(`[id="${itemId}"]`) as HTMLElement;
if (item) {
item.style.left = leftValue;
}
}
posted @   江北小乔  阅读(85)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示