diff --git a/app/components/AutoCarousel.tsx b/app/components/AutoCarousel.tsx index 01a32b1..6e8d645 100644 --- a/app/components/AutoCarousel.tsx +++ b/app/components/AutoCarousel.tsx @@ -1,4 +1,3 @@ -// src/components/CarouselDemo.tsx import * as React from "react"; import Autoplay from "embla-carousel-autoplay"; @@ -7,9 +6,7 @@ import { Carousel, CarouselContent, CarouselItem, - CarouselNext, - CarouselPrevious, -} from "@/ui/carousel"; +} from "@/ui/carousel"; // 注意这里也移除了未使用的导入 const imageUrls = [ "/images/carousel-1.jpg", @@ -18,24 +15,25 @@ const imageUrls = [ "/images/carousel-4.jpg", "/images/carousel-5.jpg", "/images/carousel-6.jpg", + "/images/book1.png", + "/images/header.png", + "/images/jcdt.png", ]; export function AutoCarouselDemo() { return ( -
- {/* 相对定位 宽度100% 水平居中 隐藏溢出 */} -
-
- {/* 绝对定位 上下与父对齐 水平左对齐 背景渐变从左 从黑70%到透明 */} +
+ + - {/* 基宽 中屏 大屏 防止收缩 相对定位 - 内边距 过渡500ms 鼠标悬停时放大1.05倍 鼠标手型 - 隐藏溢出 移除边框 中等阴影 - 弹性布局 正方形 垂直居中 水平居中 内边距0 相对 - */}
- - +
+ {`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() {