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.
59 lines
1.2 KiB
59 lines
1.2 KiB
<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>
|
|
|