fix swiper

src/app/(home)/components/Consultant/consultant.module.css

@@ -96,12 +96,10 @@
       padding: 0px;
 
       .content-nav {
-        width: 28px;
-        height: 28px;
         margin-right: 16px;
         margin-left: 16px;
         color: grey;
-        font-size: 28px;
+        font-size: 30px;
         cursor: pointer;
       }
 
@@ -278,8 +276,6 @@
         height: 360px;
 
         .content-nav {
-          width: 0;
-          height: 0;
           margin-right: 0;
           margin-left: 0;
           font-size: 0;

src/app/(home)/components/Consultant/index.tsx

@@ -14,7 +14,8 @@ const Consultant: React.FC = () => {
   const [consulantList, setConsulantList] = useState(null);
   useEffect(() => {
     fetchConsultants().then(({ data: list }) => {
-      setConsulantList(list);
+      const records = [...list?.records, ...list?.records];
+      setConsulantList(records);
     });
   }, []);
 
@@ -37,14 +38,8 @@ const Consultant: React.FC = () => {
             <GoChevronLeft />
           </span>
           <div className={styles["swiper-wrapper"]}>
-            <Swiper
-              spaceBetween={30}
-              initialSlide={0}
-              loop={true}
-              slidesPerView={isMobile ? 1 : 4}
-              onSwiper={setSwiperRef}
-            >
-              {consulantList?.records?.map((item, index) => {
+            <Swiper spaceBetween={30} loop={true} slidesPerView={isMobile ? 1 : 4} onSwiper={setSwiperRef}>
+              {consulantList?.map((item, index) => {
                 return (
                   <SwiperSlide key={index}>
                     <a href={`/partner?id=${item.id}`} className={styles["col-md-4"]}>

src/app/(home)/components/Customer/customer.module.css

@@ -97,19 +97,7 @@
       order: 1;
       flex-grow: 0;
 
-      .content-nav-left {
-        width: 40px;
-        height: 40px;
-        font-size: 30px;
-        margin-left: 16px;
-        margin-right: 16px;
-        color: grey;
-        cursor: pointer;
-      }
-
-      .content-nav-next {
-        width: 40px;
-        height: 40px;
+      .content-nav {
         font-size: 30px;
         margin-left: 16px;
         margin-right: 16px;
@@ -361,15 +349,7 @@
         height: 480px;
         background: #17213c;
 
-        .content-nav-left {
-          width: 0;
-          height: 0;
-          font-size: 0;
-          margin-left: 0;
-          margin-right: 0;
-        }
-
-        .content-nav-next {
+        .content-nav {
           width: 0;
           height: 0;
           font-size: 0;

src/app/(home)/components/Customer/index.tsx

@@ -6,7 +6,6 @@ import { isMobile } from "react-device-detect";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/navigation";
-import { Navigation } from "swiper/modules";
 import { GoChevronLeft, GoChevronRight } from "react-icons/go";
 import styles from "./customer.module.css";
 import { fetchCustomers } from "@/lib/cms";
@@ -37,7 +36,7 @@ export default function Services() {
           <div className={styles.content2}>10余年来，高潜服务并长期陪伴了多家大型集团及中小型企业，他们如是说...</div>
         </div>
         <div className={styles["main-details"]}>
-          <span className={styles["content-nav-left1"]} onClick={() => slideToPrev()}>
+          <span className={styles["content-nav"]} onClick={() => slideToPrev()}>
             <GoChevronLeft />
           </span>
           <div className={styles["swiper-wrapper"]}>
@@ -72,7 +71,7 @@ export default function Services() {
               })}
             </Swiper>
           </div>
-          <div className={styles["content-nav-next"]} onClick={() => slideToNext()}>
+          <div className={styles["content-nav"]} onClick={() => slideToNext()}>
             <GoChevronRight />
           </div>
         </div>

src/app/(home)/components/Customer/styles.css

@@ -1,17 +0,0 @@
-.swiper-button-next {
-  --swiper-navigation-size: 20px;
-  --swiper-navigation-top-offset: 50%;
-  --swiper-navigation-sides-offset: 0px;
-  --swiper-navigation-color: red;
-  z-index: 1000;
-}
-
-.content-nav-left1 {
-  width: 40px;
-  height: 40px;
-  font-size: 30px;
-  margin-left: 16px;
-  margin-right: 16px;
-  color: grey;
-  cursor: pointer;
-}

src/app/(home)/components/Show/index.tsx

@@ -1,37 +1,33 @@
 "use client";
-import React, { useRef, useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
-import { Controller, EffectCoverflow, Navigation } from "swiper/modules";
+import { EffectCoverflow } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/effect-coverflow";
-import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+import { GoChevronLeft, GoChevronRight } from "react-icons/go";
 import styles from "./show.module.css";
 import { fetchVideos } from "@/lib/cms";
 
 export default function Show() {
-  const [currentIndex, setCurrentIndex] = useState(2);
+  const [swiperRef, setSwiperRef] = useState(null);
   const [videoUrlList, setVideoUrlList] = useState(null);
   useEffect(() => {
     fetchVideos().then(({ data: list }) => {
-      setCurrentIndex(list.total - 1);
-      setVideoUrlList(list);
+      const records = list?.records?.sort((b, c) => {
+        return Date.parse(b.createTime) - Date.parse(c.createTime);
+      });
+      setVideoUrlList(records);
     });
   }, []);
 
-  const videosRef = useRef([]);
-  const [swiper, setSwiper] = useState<Swiper>();
-  const pauseOtherVideos = () => {
-    const video = document.getElementsByClassName("video");
-    const elementsArray = Array.from(video);
-    if (elementsArray) {
-      elementsArray.forEach((element) => {
-        element.pause();
-      });
-    }
+  const slideToPrev = () => {
+    console.log("hi");
+    swiperRef.slidePrev();
   };
 
-  const handleVideoRef = (video: any, index: number) => {
-    videosRef.current[index] = video;
+  const slideToNext = () => {
+    console.log("bye");
+    swiperRef.slideNext();
   };
 
   return (
@@ -40,18 +36,20 @@ export default function Show() {
         <div className={styles["show-content"]}>
           <div className={styles["show-title"]}>走近高潜</div>
         </div>
-        <div className={styles["video-wrapper"]}>
-          <LeftOutlined
-            className={styles["video-nav"]}
-            onClick={() => {
-              swiper?.slidePrev();
-            }}
-          />
+        <div className={styles["show-details"]}>
+          <span className={styles["show-nav"]} onClick={() => slideToPrev()}>
+            <GoChevronLeft />
+          </span>
 
-          <div className={styles["show-videos"]}>
+          <div className={styles["swiper-wrapper"]}>
             <Swiper
-              effect={"coverflow"}
+              spaceBetween={30}
+              initialSlide={0}
+              centeredSlides={true}
               loop={true}
+              slidesPerGroup={1}
+              slidesPerView={1.5}
+              effect={"coverflow"}
               coverflowEffect={{
                 rotate: 0,
                 stretch: 0,
@@ -59,44 +57,27 @@ export default function Show() {
                 modifier: 1,
                 slideShadows: false,
               }}
-              initialSlide={1}
-              slidesPerView={1.5}
-              centeredSlides={true}
               modules={[EffectCoverflow]}
-              onSlideChange={(swiper) => {
-                setCurrentIndex(swiper.realIndex);
-                pauseOtherVideos();
-              }}
-              onSwiper={(swiper) => {
-                setSwiper(swiper);
-              }}
+              onSwiper={setSwiperRef}
             >
-              {videoUrlList?.records
-                ?.sort((b, c) => {
-                  return Date.parse(b.createTime) - Date.parse(c.createTime);
-                })
-                .map((item, index) => {
-                  return (
-                    <SwiperSlide key={index}>
-                      <video
-                        ref={(video) => handleVideoRef(video, index)}
-                        className={styles.video}
-                        src={item.url}
-                        controls={currentIndex == index}
-                        poster={`${item.url}?x-oss-process=video/snapshot,t_5000,m_fast`}
-                        autoPlay={false}
-                      ></video>
-                    </SwiperSlide>
-                  );
-                })}
+              {videoUrlList?.map((item, index) => {
+                return (
+                  <SwiperSlide key={index}>
+                    <video
+                      className={styles.video}
+                      src={item.url}
+                      controls
+                      poster={`${item.url}?x-oss-process=video/snapshot,t_5000,m_fast`}
+                      autoPlay={false}
+                    ></video>
+                  </SwiperSlide>
+                );
+              })}
             </Swiper>
           </div>
-          <RightOutlined
-            className={styles["video-nav"]}
-            onClick={() => {
-              swiper?.slideNext();
-            }}
-          />
+          <span className={styles["show-nav"]} onClick={() => slideToNext()}>
+            <GoChevronRight />
+          </span>
         </div>
       </div>
       <div className={styles["show-background"]}></div>

src/app/(home)/components/Show/show.module.css

@@ -13,7 +13,7 @@
     flex-direction: column;
     gap: 50px;
     align-items: center;
-    width: 1050px;
+    width: 1250px;
     height: 680px;
     margin: 0 auto;
     padding: 80px 0;
@@ -77,39 +77,29 @@
       }
     }
 
-    .video-wrapper {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
-    .video-nav {
-      width: 28px;
-      height: 28px;
-      margin-right: 16px;
-      margin-left: 16px;
-      color: #252b42;
-      font-size: 28px;
-    }
-
-    .show-videos {
+    .show-details {
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: center;
       box-sizing: border-box;
-      width: 1150px;
-      height: 450px;
 
-      /* light background */
-
-      border-radius: 5px;
-
-      /* Inside auto layout */
+      .show-nav {
+        margin-right: 16px;
+        margin-left: 16px;
+        color: grey;
+        font-size: 30px;
+        cursor: pointer;
+      }
 
-      .video {
-        width: 800px;
+      .swiper-wrapper {
+        width: 1150px;
         height: 450px;
+
+        .video {
+          width: 800px;
+          height: 450px;
+        }
       }
     }
   }
@@ -202,8 +192,6 @@
       }
 
       .video-nav {
-        width: 0;
-        height: 0;
         margin-right: 0;
         margin-left: 0;
         font-size: 0;