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

<script setup>
const containerRef = ref(null)
useSwiper(containerRef, {
  effect: 'cards',
  grabCursor: true,
  centeredSlides: true,
  loop: true,
  slidesPerView: 'auto',
  cardsEffect: {
    slideShadows: true,
    perSlideOffset: 8,
  },

  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-cards-next',
    prevEl: '.swiper-cards-prev',
  },
})
</script>

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

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

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

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