<template>
  <ClientOnly>
    <div class="carousel-container">
      <swiper-container ref="containerRef" :init="false">
        <slot></slot>
      </swiper-container>
    </div>
  </ClientOnly>
</template>

<script setup>
const containerRef = ref(null)
useSwiper(containerRef, {
  effect: 'coverflow',
  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%;
}
</style>
