vue3下el-carousel的card模式下設定item之間的間距

江北小乔發表於2024-11-23
Vue模式
<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) {
    setCarouselItemStyle(list.value.length - 1, currentPrevCent);
    setCarouselItemStyle(0, currentCent);
    setCarouselItemStyle(1, currentNextCent);
  } else if (currentId === list.value.length - 1) {
    setCarouselItemStyle(currentId - 1, currentPrevCent);
    setCarouselItemStyle(currentId, currentCent);
    setCarouselItemStyle(0, currentNextCent);
  } else {
    setCarouselItemStyle(currentId - 1, currentPrevCent);
    setCarouselItemStyle(currentId, currentCent);
    setCarouselItemStyle(currentId + 1, 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;
  }
}

相關文章