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

"use client";
import { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import Image from "next/image";
import { HomeSectionImage } from "@/types/home/type";
interface middleBannerProps {
  middleBanner: HomeSectionImage[];
}
export default function HomeMiddleBanner({ middleBanner }: middleBannerProps) {
  const [activeIndex, setActiveIndex] = useState(0);

  const [swiperRef] = useState(null);
  if (!middleBanner || middleBanner.length === 0) return null;
  const middleBannerImages = middleBanner;

  const handleSlideChange = (swiper: any) => {
    setActiveIndex(swiper.activeIndex);
  };

  const handleIndicatorClick = (index: any) => {
    if (swiperRef) {
      setActiveIndex(index);
    }
  };

  return (
    <div className="max-w-screen-md mx-auto p-4">
      <Swiper
        modules={[Navigation]}
        spaceBetween={10}
        slidesPerView={1}
        onSlideChange={handleSlideChange}
        className="mb-6"
      >
        {middleBannerImages.map((item, idx) => (
          <SwiperSlide key={idx}>
            <div className="relative w-full h-42">
              <Image
                src={item.image}
                alt={item.title}
                fill
                className="w-full h-auto object-cover rounded-md"
              />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
      <div className="flex justify-center gap-2">
        <button
          onClick={() => handleIndicatorClick(0)}
          className={`w-6 h-[5px] rounded-full  opacity-100 ${
            activeIndex === 0 ? "bg-[#333]" : "bg-[#E5E5E5]"
          }`}
          aria-label="切换到第一块"
        />
        <button
          onClick={() => handleIndicatorClick(1)}
          className={`w-6 h-[5px] rounded-full  opacity-100 ${
            activeIndex === 1 ? "bg-[#333]" : "bg-[#E5E5E5]"
          }`}
          aria-label="切换到第二块"
        />
      </div>
    </div>
  );
}