首页banner自动轮播

src/app/(public)/_components/TopImageSwiper.tsx

@@ -1,6 +1,9 @@
 
+import Image from 'next/image';
+import Link from 'next/link';
 import { Swiper, SwiperSlide } from 'swiper/react';
-// import { Navigation, Pagination, Mousewheel, Keyboard } from 'swiper/modules';
+import { Autoplay } from 'swiper/modules';
+
 // 定义图片类型
 type BannerImageItem = {
   link: string;
@@ -14,25 +17,19 @@ interface TopImageSwiperProps {
 const TopImageSwiper = ({ bannerImages }: TopImageSwiperProps) => {
   // 兜底：没有图片不渲染，防止报错
   if (!bannerImages || bannerImages.length === 0) return null;
-  // ✅ 直接在这里放你的图片数组，想加多少加多少
-  // const images = [
-  //   'https://cdn.asteriahair.com/uploads/202607/01/20260701165056_761989a0fdc11d5e.jpg',
-  //   'https://cdn.asteriahair.com/uploads/202607/01/20260701165110_3fff435adf276b89.jpg',
-  //   'https://cdn.asteriahair.com/uploads/202607/01/20260701165123_c424f6f1d0b29522.jpg',
-  //   'https://cdn.asteriahair.com/uploads/202607/01/20260701165056_761989a0fdc11d5e.jpg',
-  // ];
 
   return (
-    <div className="w-full max-w-[1200px] mx-auto ">
+    <div className="w-full mx-auto ">
       <Swiper
         slidesPerView={1}
         spaceBetween={0}
         loop={true} // 无限轮播
-      
-        // pagination={{ clickable: true }}
-        // mousewheel
-        // keyboard={{ enabled: true }}
-        className="h-auto md:h-[80vh]  overflow-hidden"
+        autoplay={{
+          delay: 2500,
+          disableOnInteraction: false,
+        }}
+        modules={[Autoplay]}
+        className="h-auto  overflow-hidden"
       >
         {/* ✅ 自动遍历图片数组，一行代码搞定所有图片 */}
         {bannerImages .map((item, index) => (
@@ -42,6 +39,15 @@ const TopImageSwiper = ({ bannerImages }: TopImageSwiperProps) => {
               alt={item.title}
               className="w-full h-full object-cover"
             />
+            <Link href={item.link} className="w-full">
+              <Image 
+                  width={390}
+                  height={520}
+                  src={item.image}
+                  alt={item.title}
+                  className="w-full h-auto object-cover"
+              />
+            </Link>
           </SwiperSlide>
         ))}