|
|
|
@ -1,40 +1,37 @@
@@ -1,40 +1,37 @@
|
|
|
|
|
<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> |
|
|
|
|
<ClientOnly> |
|
|
|
|
<div class="carousel-container"> |
|
|
|
|
<swiper-container ref="containerRef" :init="false"> |
|
|
|
|
<slot></slot> |
|
|
|
|
</swiper-container> |
|
|
|
|
</div> |
|
|
|
|
</ClientOnly> |
|
|
|
|
</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') |
|
|
|
|
} |
|
|
|
|
const containerRef = ref(null) |
|
|
|
|
useSwiper(containerRef, { |
|
|
|
|
effect: 'coverflow', |
|
|
|
|
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> |
|
|
|
@ -44,82 +41,4 @@ function onSlideChange(swiper) {
@@ -44,82 +41,4 @@ function onSlideChange(swiper) {
|
|
|
|
|
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> |
|
|
|
|