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 相对
- */}
-
-
+
+
-
+
))}
- {/* 左右箭头控制 */}
-
-
+
);
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() {