app/components/AutoCarousel.tsx

@@ -1,78 +0,0 @@
-// 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,
-} from "@/ui/carousel";
-
-const imageUrls = [
-  "/images/carousel-1.jpg",
-  "/images/carousel-2.jpg",
-  "/images/carousel-3.jpg",
-  "/images/carousel-4.jpg",
-  "/images/carousel-5.jpg",
-  "/images/carousel-6.jpg",
-];
-
-export function AutoCarouselDemo() {
-  return (
-    <div className="relative w-full  mx-auto overflow-hidden">
-      {/* 左右渐隐遮罩 */}
-      <div className="absolute inset-y-0 left-0 w-16 bg-gradient-to-r from-black/70 via-transparent pointer-events-none z-10" />
-      <div className="absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-black/70 via-transparent pointer-events-none z-10" />
-
-      <Carousel
-        opts={{
-          loop: true,
-          align: "start",
-        }}
-        plugins={[
-          Autoplay({
-            delay: 3000,
-            stopOnInteraction: false,
-          }),
-        ]}
-        className="w-full"
-      >
-        <CarouselContent className="flex gap-4">
-          {imageUrls.map((src, index) => (
-            <CarouselItem
-              key={index}
-              className="basis-1/4 md:basis-1/3 lg:basis-1/4 flex-shrink-0 relative"
-            >
-              {/* 悬停放大容器 */}
-              <div
-                className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer"
-                style={{
-                  transform: 'scale(1)',
-                  transition: 'all 0.5s ease',
-                }}
-              >
-                <Card className="overflow-hidden border-none shadow-lg">
-                  <CardContent className="flex aspect-square items-center justify-center p-0 relative">
-                    <img
-                      src={src}
-                      alt={`Slide ${index + 1}`}
-                      className="w-full h-full object-cover"
-                      loading="lazy" // 启用懒加载
-                    />
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-
-        {/* 左右箭头控制 */}
-        <CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2 z-20" />
-        <CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 z-20" />
-      </Carousel>
-    </div>
-  );
-}