caszl-next/app/_components/AnhuiSwiper.tsx

"use client";
import React, { useEffect, useRef } from "react";

import Swiper from "swiper";
import { Pagination, EffectCoverflow, Autoplay } from "swiper/modules";

// import Swiper and modules styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/effect-coverflow";
import "swiper/css/autoplay";
import Image from "next/image";

const data = [
  {
    id: 28,
    cid: 3,
    name: "ah9.jpeg",
    path: "api/uploads/image/20231101/99c2f8c3-aba8-4872-a9b9-dfbcf128c062.jpeg",
    uri: "http://localhost:8082/api/uploads/image/20231101/99c2f8c3-aba8-4872-a9b9-dfbcf128c062.jpeg",
    ext: "jpeg",
    size: "40KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
  {
    id: 27,
    cid: 3,
    name: "ah7.jpeg",
    path: "api/uploads/image/20231101/aba2a38f-ee62-4730-af7a-5b8933ed7497.jpeg",
    uri: "http://localhost:8082/api/uploads/image/20231101/aba2a38f-ee62-4730-af7a-5b8933ed7497.jpeg",
    ext: "jpeg",
    size: "4KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
  {
    id: 26,
    cid: 3,
    name: "ah8.jpeg",
    path: "api/uploads/image/20231101/63523f59-9b59-40d1-a654-c4678f8a1913.jpeg",
    uri: "http://localhost:8082/api/uploads/image/20231101/63523f59-9b59-40d1-a654-c4678f8a1913.jpeg",
    ext: "jpeg",
    size: "29KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
  {
    id: 25,
    cid: 3,
    name: "ah2.jpeg",
    path: "api/uploads/image/20231101/5bedf085-841a-48cc-bca2-9c9b2c751b48.jpeg",
    uri: "http://localhost:8082/api/uploads/image/20231101/5bedf085-841a-48cc-bca2-9c9b2c751b48.jpeg",
    ext: "jpeg",
    size: "26KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
  {
    id: 24,
    cid: 3,
    name: "ah5.jpeg",
    path: "api/uploads/image/20231101/2f19a501-89f7-4f78-9487-096a3799736d.jpeg",
    uri: "http://localhost:8082/api/uploads/image/20231101/2f19a501-89f7-4f78-9487-096a3799736d.jpeg",
    ext: "jpeg",
    size: "22KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
  {
    id: 23,
    cid: 3,
    name: "ah6.jpeg",
    path: "api/uploads/image/20231101/70f4bea2-77a4-4595-a3a5-5c60711afae6.jpeg",
    uri: "http://localhost:8082/api/uploads/image/20231101/70f4bea2-77a4-4595-a3a5-5c60711afae6.jpeg",
    ext: "jpeg",
    size: "22KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
  {
    id: 22,
    cid: 3,
    name: "ah3.jpeg",
    path: "api/uploads/image/20231101/82309b4a-22e8-4b06-8e9d-d2b114ef3aad.jpeg",
    uri: "http://localhost:8082/api/uploads/image/20231101/82309b4a-22e8-4b06-8e9d-d2b114ef3aad.jpeg",
    ext: "jpeg",
    size: "14KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
  {
    id: 21,
    cid: 3,
    name: "ah1.jpeg",
    path: "api/uploads/image/20231101/5e3a02dc-2c7c-4671-9151-79315a53a3d2.jpeg",
    uri: "http://localhost:8082/api/uploads/image/20231101/5e3a02dc-2c7c-4671-9151-79315a53a3d2.jpeg",
    ext: "jpeg",
    size: "9KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
  {
    id: 20,
    cid: 3,
    name: "ah4.jpeg",
    path: "api/uploads/image/20231101/106409ac-e454-47f2-a383-8ea572718b3d.jpeg",
    uri: "http://localhost:8082/api/uploads/image/20231101/106409ac-e454-47f2-a383-8ea572718b3d.jpeg",
    ext: "jpeg",
    size: "31KB",
    createTime: "2023-11-01 10:40:15",
    updateTime: "2023-11-01 10:40:15",
  },
];
const AnhuiSwiper = () => {
  const swiperRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    let swiper: Swiper | null = null;
    if (swiperRef.current && data) {
      swiper = new Swiper(swiperRef.current, {
        modules: [Pagination, EffectCoverflow, Autoplay],
        autoplay: {
          delay: 2000,
        },
        loop: true,
        slidesPerView: 3,
        effect: "coverflow",
        pagination: {
          el: ".swiper-pagination",
          dynamicBullets: true,
        },
      });
    }
    return () => {
      swiper?.destroy();
      swiper = null;
    };
  }, []);
  return (
    <div className={"flex h-[205px] flex-col bg-white"}>
      <div
        className={
          "flex h-[30px] items-center bg-[#1f87e8] pl-[5px] text-white"
        }
      >
        安徽风采
      </div>
      <div className={"h-0 flex-1"}>
        <div ref={swiperRef} className={"swiper h-full"}>
          <div className={"swiper-wrapper"}>
            {data.map((el) => (
              <div className={"swiper-slide"} key={el.id}>
                <img
                  className={"h-full w-full object-contain"}
                  src={`${
                    process.env.NEXT_PUBLIC_CLIENT_BASE_URL
                  }${el.path.match(/\/uploads\/.*/)?.[0]}`}
                  alt={""}
                />
              </div>
            ))}
          </div>
          <div className={"swiper-pagination"}></div>
        </div>
      </div>
    </div>
  );
};

export default AnhuiSwiper;