<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;
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步