You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
<template>
|
|
|
|
|
<ClientOnly>
|
|
|
|
|
<div class="carousel-container">
|
|
|
|
|
<swiper-container ref="containerRef" :init="false" :effect="'coverflow'">
|
|
|
|
|
<slot></slot>
|
|
|
|
|
</swiper-container>
|
|
|
|
|
<div class="swiper-button-prev"></div>
|
|
|
|
|
<div class="swiper-button-next"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</ClientOnly>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
const containerRef = ref(null)
|
|
|
|
|
useSwiper(containerRef, {
|
|
|
|
|
effect: 'coverflow', // 3d 效果
|
|
|
|
|
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%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.swiper-button-prev,
|
|
|
|
|
.swiper-button-next {
|
|
|
|
|
@apply absolute top-0 bottom-0 w-32 z-10;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.swiper-button-prev {
|
|
|
|
|
left: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.swiper-button-next {
|
|
|
|
|
right: 0px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
