diff --git a/app/components/AutoCarousel.tsx b/app/components/AutoCarousel.tsx index 01a32b1..0ab7c5f 100644 --- a/app/components/AutoCarousel.tsx +++ b/app/components/AutoCarousel.tsx @@ -1,14 +1,13 @@ -// src/components/CarouselDemo.tsx import * as React from "react"; import Autoplay from "embla-carousel-autoplay"; -import { Card, CardContent } from "@/ui/card"; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, + type CarouselApi, } from "@/ui/carousel"; const imageUrls = [ @@ -18,64 +17,86 @@ const imageUrls = [ "/images/carousel-4.jpg", "/images/carousel-5.jpg", "/images/carousel-6.jpg", + "/images/carousel-7.jpg", + "/images/carousel-8.jpg", + "/images/carousel-9.jpg", + "/images/book1.png", + "/images/header.png", + "/images/jcdt.png", ]; export function AutoCarouselDemo() { + const [api, setApi] = React.useState(); + const [current, setCurrent] = React.useState(0); + const totalSlides = imageUrls.length; + + React.useEffect(() => { + if (!api) return; + setCurrent(api.selectedScrollSnap()); + api.on("select", () => { + setCurrent(api.selectedScrollSnap()); + }); + }, [api]); + + const getScaleByDistance = (index: number, current: number, total: number): number => { + const directDist = Math.abs(index - current); + const wrapDist = total - directDist; + const minDist = Math.min(directDist, wrapDist); + return Math.max(0.5, 1.4 - minDist * 0.15); + }; + return ( -
- {/* 相对定位 宽度100% 水平居中 隐藏溢出 */} -
-
- {/* 绝对定位 上下与父对齐 水平左对齐 背景渐变从左 从黑70%到透明 */} + // 最外层:允许内容溢出(关键!) +
- - {imageUrls.map((src, index) => ( - - {/* 基宽 中屏 大屏 防止收缩 相对定位 - 内边距 过渡500ms 鼠标悬停时放大1.05倍 鼠标手型 - 隐藏溢出 移除边框 中等阴影 - 弹性布局 正方形 垂直居中 水平居中 内边距0 相对 - */} -
+ {imageUrls.map((src, index) => { + const scale = getScaleByDistance(index, current, totalSlides); + const isCurrent = scale > 1.2; + + return ( + - - - {`Slide - - -
-
- ))} + {/* 这个 div 是真正要缩放的整体卡片 */} +
+ {`Slide +
+ + ); + })}
- {/* 左右箭头控制 */} - - + +
); diff --git a/app/components/Carousel.tsx b/app/components/Carousel.tsx index ee00eb0..95212db 100755 --- a/app/components/Carousel.tsx +++ b/app/components/Carousel.tsx @@ -24,7 +24,9 @@ export function CarouselDemo() { const [api, setApi] = React.useState(); const [current, setCurrent] = React.useState(0); const [count, setCount] = React.useState(0); - const totalSlides = imageUrls.length; + const totalSlides = imageUrls.length; + const [isDotPagination, setIsDotPagination] = React.useState(true); // 控制分页指示器类型 + React.useEffect(() => { if (!api) return; @@ -53,18 +55,16 @@ export function CarouselDemo() { {Array.from({ length: totalSlides }).map((_, index) => (
- - -
+
-
- - + > +
+
))} @@ -79,9 +79,9 @@ export function CarouselDemo() {