website/components/SwiperSlider3D.vue

<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>