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.
125 lines
2.4 KiB
125 lines
2.4 KiB
<template> |
|
<div class="carousel-container"> |
|
<swiper-container |
|
:modules="[SwiperPagination, SwiperAutoplay, SwiperNavigation]" |
|
:centered-slides="true" |
|
:space-between="-1000" |
|
:loop="false" |
|
:slides-per-view="2.5" |
|
:initial-slide="1" |
|
@slideChange="onSlideChange" |
|
:pagination="{ |
|
clickable: true, |
|
dynamicBullets: true, |
|
}" |
|
:navigation="false" |
|
:autoplay="{ |
|
delay: 25000, |
|
disableOnInteraction: false, |
|
}" |
|
:grabCursor="true" |
|
class="carousel" |
|
> |
|
<slot></slot> |
|
</swiper-container> |
|
</div> |
|
</template> |
|
|
|
<script setup> |
|
import { Pagination, Navigation, Autoplay } from 'swiper/modules' |
|
|
|
const SwiperPagination = Pagination |
|
const SwiperNavigation = Navigation |
|
const SwiperAutoplay = Autoplay |
|
|
|
function onSlideChange(swiper) { |
|
console.log('swiper') |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
.carousel-container { |
|
width: 100%; |
|
position: relative; |
|
overflow: hidden; |
|
height: 100%; |
|
} |
|
|
|
.carousel { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
:deep(.swiper-slide) { |
|
transition: |
|
transform 0.6s, |
|
opacity 0.6s; |
|
opacity: 0.1; |
|
transform: scale(0.8); |
|
filter: blur(1px); |
|
overflow: hidden; |
|
transform-style: preserve-3d; |
|
perspective: 1000px; |
|
} |
|
:deep(.swiper-slide-prev), |
|
:deep(.swiper-slide-next) { |
|
opacity: 0.3; |
|
filter: blur(12px); |
|
} |
|
|
|
:deep(.swiper-slide-active) { |
|
opacity: 1; |
|
transform: scale(1); |
|
filter: blur(0); |
|
z-index: 10; |
|
} |
|
|
|
.slide { |
|
height: 100%; |
|
background-color: #0f172a; |
|
color: white; |
|
overflow: hidden; |
|
border-radius: 16px; |
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); |
|
} |
|
|
|
/* 自定义Swiper分页和导航按钮样式 */ |
|
:deep(.swiper-pagination-bullet) { |
|
background: white; |
|
opacity: 0.5; |
|
} |
|
|
|
:deep(.swiper-pagination-bullet-active) { |
|
background: #60a5fa; |
|
opacity: 1; |
|
} |
|
:deep(.swiper-slide-active) div { |
|
filter: brightness(0.7); |
|
} |
|
|
|
:deep(.swiper-slide-active) div { |
|
transform: translateZ(30px); |
|
transition: transform 0.3s ease; |
|
} |
|
:deep(.swiper-slide-next) { |
|
} |
|
:deep(.swiper-button-prev), |
|
:deep(.swiper-button-next) { |
|
color: white; |
|
background: rgba(0, 0, 0, 0.3); |
|
width: 50px; |
|
height: 50px; |
|
border-radius: 50%; |
|
transition: background 0.3s ease; |
|
} |
|
|
|
:deep(.swiper-button-prev:hover), |
|
:deep(.swiper-button-next:hover) { |
|
background: rgba(0, 0, 0, 0.6); |
|
} |
|
|
|
:deep(.swiper-button-prev:after), |
|
:deep(.swiper-button-next:after) { |
|
font-size: 1.5rem; |
|
} |
|
</style>
|
|
|