Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news

app/components/AutoCarousel.tsx

@@ -0,0 +1,78 @@
+// 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>
+  );
+}