<template>
  <div v-if="slides.length > 0" class="app-banner px-4">
    <Swiper
        class="select-none"
        :slides-per-view="1"
        :space-between="50"
        pagination
        :pagination="{ clickable: true }"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
    >
      <SwiperSlide v-for="slide in slides" :key="slide.id">
        <img :src="slide.image" :alt="slide.title">
      </SwiperSlide>
    </Swiper>
  </div>
</template>

<script setup>
import {Swiper, SwiperSlide} from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import {onMounted, ref} from "vue";
import {fetchBanner} from "@/utils/ftch.js";

const slides = ref([]);

const onSwiper = (swiper) => {
  console.log(swiper);
};
const onSlideChange = () => {
  console.log('slide change');
};

onMounted(async () => {
  const response = await fetchBanner();
  slides.value = response.data;
})
</script>

<style>
.app-banner {
  overflow: hidden;
}

.app-banner .swiper-horizontal > .swiper-pagination-bullets {
  position: relative;
  bottom: 0;
}

.app-banner .swiper-horizontal .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-banner .swiper-horizontal .swiper-slide > img {
  border-radius: var(--radius-box);
}
</style>