轮播最终版

app/components/AutoCarousel.tsx

@@ -23,19 +23,19 @@ const imageUrls = [
 export function AutoCarouselDemo() {
   return (
     <div className="relative w-full  mx-auto overflow-hidden">
-      {/* 左右渐隐遮罩 */}
+      {/* 相对定位 宽度100% 水平居中 隐藏溢出 */}
       <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" />
-
+      {/* 绝对定位 上下与父对齐 水平左对齐 背景渐变从左 从黑70%到透明 */}
       <Carousel
         opts={{
-          loop: true,
+          loop: true,//循环
           align: "start",
         }}
         plugins={[
           Autoplay({
-            delay: 3000,
+            delay: 3000, // 自动播放
-            stopOnInteraction: false,
+            stopOnInteraction: false,//不因为鼠标交互停止
           }),
         ]}
         className="w-full"
@@ -46,7 +46,11 @@ export function AutoCarouselDemo() {
               key={index}
               className="basis-1/4 md:basis-1/3 lg:basis-1/4 flex-shrink-0 relative"
             >
-              {/* 悬停放大容器 */}
+              {/* 基宽 中屏 大屏 防止收缩 相对定位 
+              内边距 过渡500ms 鼠标悬停时放大1.05倍 鼠标手型
+              隐藏溢出 移除边框 中等阴影
+              弹性布局 正方形 垂直居中 水平居中 内边距0 相对
+              */}
               <div
                 className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer"
                 style={{

app/components/Carousel.tsx

@@ -1,12 +1,12 @@
 // src/components/CarouselDemo.tsx
 import * as React from "react";
-import Autoplay from "embla-carousel-autoplay";
+import Autoplay from "embla-carousel-autoplay";//实现轮播图的自动播放功能
 
 import { Card, CardContent } from "@/ui/card";
 import {
-  Carousel,
+  Carousel,//主体
-  CarouselContent,
+  CarouselContent,//内容容器
-  CarouselItem,
+  CarouselItem,//单个轮播项
   CarouselNext,
   CarouselPrevious,
   type CarouselApi,
@@ -24,12 +24,11 @@ export function CarouselDemo() {
     if (!api) return;
 
     setCount(api.scrollSnapList().length);
-    setCurrent(api.selectedScrollSnap());
+    setCurrent(api.selectedScrollSnap());//获取当前选中的轮播项的索引
-
     api.on("select", () => {
       setCurrent(api.selectedScrollSnap());
     });
-  }, [api]);
+  }, [api]);//当api改变时，执行此函数 水平居中 循环 自动播放 回传状态
 
   return (
     <div className="relative w-full max-w-4xl mx-auto">
@@ -54,7 +53,7 @@ export function CarouselDemo() {
                     <div 
                     className="w-full h-full"
                     style={{
-                      backgroundImage: "url('/app/images/header.png')",
+                      backgroundImage: "url('/app/images/header.png')",//背景图片可修改
                       backgroundSize: '100% 100%',
                     }}
                     >
@@ -79,7 +78,6 @@ export function CarouselDemo() {
             className={`h-2 w-2 rounded-full transition-colors ${
               index === current ? "bg-black" : "bg-black/50"
             }`}
-            aria-label={`Go to slide ${index + 1}`}
           />
         ))}
       </div>

app/components/body/ImageGridSection.tsx

@@ -1,6 +1,6 @@
 import { CarouselDemo } from "@/components/Carousel";
 const ImageGridSection = () => {
-    // 替换为你自己的图片路径
+    
     const elements = [
         "/images/carousel-1.jpg",
         <CarouselDemo />,

app/routes/news.tsx

@@ -8,6 +8,7 @@ import NewsList from "@/components/list/NewsList";
 import ImageGridSection from "@/components/body/ImageGridSection";
 import { CarouselDemo } from "@/components/Carousel";
 import GrassrootsDynamics from "@/components/body/GrassrootsDynamics";
+import { AutoCarouselDemo } from "@/components/AutoCarousel";
 export function meta( ) {
   return [
     { title: "New React Router App" },
@@ -24,8 +25,10 @@ export default function Home() {
       <CarouselDemo />
       <NewsList />
       <ImageGridSection />
-      <Integrated />
+      <AutoCarouselDemo />
       <CultureBgPage />
+      <Integrated />
+    
     </div>
   );
 }