<template>
   <div class="swiper-container mySwiper iq-width overflow-hidden mx-auto">
          <swiper ref="swiperRef" :effect="'coverflow'" :grab-cursor="true" :centered-slides="true" :slides-per-view="4"
            :space-between="40" :coverflow-effect="{
            rotate: 0,
            stretch: 0,
            depth: 142,
            modifier: 1,
            slideShadows: true,
          }" :loop="true" :breakpoints="{
            0: { slidesPerView: 2, spaceBetween: 20 },
            375: { slidesPerView: 2, spaceBetween: 20 },
            768: { slidesPerView: 3, spaceBetween: 30 },
            1024: { slidesPerView: 5, spaceBetween: 30 },
            1500: { slidesPerView: 5, spaceBetween: 30 },
          }" @swiper="onSwiper">
            <swiper-slide v-for="(slide, index) in slides" :key="index" @click="() => slideToCenter(index)">
              <img class="img-fluid w-100 rounded" :src="generateImgPath(`/assets/images/${slide}`)" alt="image" />
            </swiper-slide>
          </swiper>
        </div>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { ref } from 'vue';
import SwiperCore, { EffectCoverflow, Navigation, Autoplay } from 'swiper/core';
SwiperCore.use([EffectCoverflow, Navigation, Autoplay]);
const slides = ref([
  'swiper/01.jpg',
  'swiper/02.jpg',
  'swiper/03.jpg',
  'swiper/04.jpg',
  'swiper/05.jpg',
  'swiper/06.jpg',
  'swiper/07.jpg',
  'swiper/08.jpg',
  'swiper/09.jpg'
]);
const swiperRef = ref(null);
let swiperInstance = null;
const onSwiper = (swiper) => {
  swiperInstance = swiper;
};
const slideToCenter = (index) => {
  if (swiperInstance) {
    swiperInstance.slideToLoop(index);
  }
};
</script>