<template>
  <ClientOnly>
    <div class="carousel-container">
      <swiper-container ref="containerRef" :init="false" :effect="'coverflow'">
        <slot></slot>
      </swiper-container>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </ClientOnly>
</template>

<script setup>
const containerRef = ref(null)
useSwiper(containerRef, {
  effect: 'coverflow', // 3d 效果
  grabCursor: true, // 鼠标悬停时显示手型
  centeredSlides: true, // 居中显示
  loop: true, // 循环播放
  initialSlide: 2, // 初始显示第几张
  slidesPerView: 'auto', // 每张占满屏幕
  coverflowEffect: {
    rotate: 0, // 旋转角度
    stretch: 0, // 拉伸
    depth: 100, // 深度
    modifier: 2.5, // 修改器
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})
</script>

<style scoped>
.carousel-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.swiper-button-prev,
.swiper-button-next {
  @apply absolute top-0 bottom-0 w-32 z-10;
}

.swiper-button-prev {
  left: 0px;
}

.swiper-button-next {
  right: 0px;
}
</style>
