60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<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> |