update

app/components/AnhuiSwiper.tsx

@@ -1,12 +1,14 @@
 "use client";
-import React, { useEffect, useState } from "react";
-import { register } from "swiper/element/bundle";
-import axios from "axios";
-import request from "@/app/lib/request";
-import { BaseResponse, PageData } from "@/app/types/base";
-import { Album } from "@/app/types/album";
+import React, { useEffect } from "react";
 
-register();
+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";
 
 const albums = [
   {
@@ -111,59 +113,50 @@ const albums = [
 ];
 
 const AnhuiSwiper = () => {
-  // const [albums, setAlbums] = useState<Album[]>([]);
-  // useEffect(() => {
-  //   request
-  //     .get<never, BaseResponse<PageData<Album>>>(`/albums/albumList`, {
-  //       // baseURL: `${process.env.NEXT_PUBLIC_ADMIN_BASE_URL}`,
-  //       baseURL: `http://localhost:8082/api}`,
-  //       params: {
-  //         cid: 3,
-  //       },
-  //     })
-  //     .then((res) => {
-  //       setAlbums(() => res.data.lists);
-  //     });
-  // }, []);
+  useEffect(() => {
+    let swiper: Swiper | null = null;
+    swiper = new Swiper(".swiper", {
+      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={"h-[205px] bg-white flex flex-col"}>
+    <div className={"flex h-[205px] flex-col bg-white"}>
       <div
         className={
-          "bg-[#1f87e8] text-white h-[30px] pl-[5px] flex items-center"
+          "flex h-[30px] items-center bg-[#1f87e8] pl-[5px] text-white"
         }
       >
         安徽风采
       </div>
-      <div className={"flex-1 h-0"}>
-        {/* @ts-ignore*/}
-        <swiper-container
-          effect={"coverflow"}
-          autoplay
-          slides-per-view="3"
-          loop
-          style={{
-            height: "100%",
-          }}
-        >
-          {/* @ts-ignore*/}
-          {albums.map((el) => (
-            // @ts-ignore
-            <swiper-slide
-              key={el.id}
-              style={{
-                display: "flex",
-                alignItems: "center",
-              }}
-            >
-              <img
-                src={`${process.env.NEXT_PUBLIC_ADMIN_BASE_URL}${el.path}`}
-                alt={""}
-              />
-              {/*@ts-ignore*/}
-            </swiper-slide>
-          ))}
-          {/* @ts-ignore */}
-        </swiper-container>
+      <div className={"h-0 flex-1"}>
+        <div className={"swiper h-full"}>
+          <div className={"swiper-wrapper"}>
+            {albums.map((el) => (
+              <div className={"swiper-slide"} key={el.id}>
+                <img
+                  className={"h-full w-full object-contain"}
+                  src={`${process.env.NEXT_PUBLIC_ADMIN_BASE_URL}${el.path}`}
+                  alt={""}
+                />
+              </div>
+            ))}
+          </div>
+          <div className={"swiper-pagination"}></div>
+        </div>
       </div>
     </div>
   );