nshop-front-m/src/app/(public)/_components/TopImageSwiper.tsx

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
// import { Navigation, Pagination, Mousewheel, Keyboard } from 'swiper/modules';
// 定义图片类型
type BannerImageItem = {
  link: string;
  image: string;
  title: string;
};
// 组件入参
interface TopImageSwiperProps {
  bannerImages: BannerImageItem[];
}
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 ">
      <Swiper
        slidesPerView={1}
        spaceBetween={0}
        loop={true} // 无限轮播
      
        // pagination={{ clickable: true }}
        // mousewheel
        // keyboard={{ enabled: true }}
        className="h-auto md:h-[80vh]  overflow-hidden"
      >
        {/* ✅ 自动遍历图片数组，一行代码搞定所有图片 */}
        {bannerImages .map((item, index) => (
          <SwiperSlide key={index}>
            <img
                 src={item.image}
              alt={item.title}
              className="w-full h-full object-cover"
            />
          </SwiperSlide>
        ))}
        
      </Swiper>
    </div>
  );
};

export default TopImageSwiper;