轮播图像

app/components/untils/Carousel.tsx

@@ -11,13 +11,21 @@ import {
   CarouselPrevious,
   type CarouselApi,
 } 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 CarouselDemo() {
   const [api, setApi] = React.useState<CarouselApi>();
   const [current, setCurrent] = React.useState(0);
   const [count, setCount] = React.useState(0);
 
-  const totalSlides = 6; 
+  const totalSlides = imageUrls.length; 
 
   React.useEffect(() => {
     if (!api) return;
@@ -46,12 +54,16 @@ export function CarouselDemo() {
         className="w-full"
       >
         <CarouselContent>
-          {Array.from({ length: totalSlides }).map((_, index) => (
+          {imageUrls.map((src, index) => (
             <CarouselItem key={index}>
               <div className="p-1">
                 <Card>
                   <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <span className="text-4xl font-semibold">{index + 1}</span>
+                     <img
+                      src={src}
+                      alt={`Slide ${index + 1}`}
+                      className="w-full h-full object-cover"
+                    />
                   </CardContent>
                 </Card>
               </div>

app/routes/news.tsx

@@ -2,6 +2,10 @@ import { CarouselDemo } from "@/components/untils/Carousel";
 import type { Route } from "./+types/news";
 import { Header } from "@/components/header/Header";
 import { TopNav } from "@/components/header/TopNav";
+import NewsList from "@/components/list/NewsList";
+
+import { C } from "node_modules/react-router/dist/development/index-react-server-client-rcoGPJhU.mjs";
+import { Carousel } from "@/ui/carousel";
 
 
 export function meta({}: Route.MetaArgs) {
@@ -14,8 +18,6 @@ export function meta({}: Route.MetaArgs) {
 export default function Home() {
   return (
     <div>
-      <Header />
-      <TopNav />
       <CarouselDemo />
     </div>
   );