hookehuyr

feat(SummerCampCard): 添加卡片效果动画以增强用户体验

在SummerCampCard组件中引入了Swiper的EffectCards模块,为卡片切换添加了平滑的动画效果。这包括卡片切换时的平移和透明度变化,以及调整了切换速度,以提升用户交互体验。
......@@ -45,9 +45,10 @@
<script setup>
import { defineProps, onMounted, ref } from 'vue'
import Swiper from 'swiper'
import { Pagination } from 'swiper/modules'
import { Pagination, EffectCards } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/effect-cards'
const props = defineProps({
items: {
......@@ -69,7 +70,19 @@ const swiperRef = ref(null)
onMounted(() => {
new Swiper(swiperRef.value, {
modules: [Pagination],
modules: [Pagination, EffectCards],
effect: 'creative',
creativeEffect: {
prev: {
translate: ['-100%', 0, 0],
opacity: 0
},
next: {
translate: ['100%', 0, 0],
opacity: 0
}
},
speed: 600,
pagination: {
el: '.swiper-pagination',
clickable: true
......