gx

project/src/pages/A6life/Swiper/index.module.scss

@@ -87,7 +87,17 @@
       }
     }
     .swiper-pagination {
-      bottom: 85px !important;
+      height: 30vh;
+        position: relative;
+        top: 4%;
+        left: 0%;
+        display: flex;
+        justify-content: center;
+        gap: 4.6vw;
+        .swiper-pagination-bullet{
+          padding: 2.5vw;
+          opacity: 0;
+        }
       .swiper-pagination-bullet-active {
         background-color: #9d0800;
       }

project/src/pages/A6life/Swiper/index.tsx

@@ -3,26 +3,35 @@ import styles from './index.module.scss'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import 'swiper/css'
 import 'swiper/css/effect-coverflow'
+import 'swiper/css/pagination'
 import 'swiper/css/navigation'
-import { EffectCoverflow, Navigation } from 'swiper/modules'
-function SwiperComponent({ activeIndex, setActiveIndex }: { activeIndex: number, setActiveIndex: (index: number) => void }) {
+import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules'
+function SwiperComponent({
+  activeIndex,
+  setActiveIndex
+}: {
+  activeIndex: number
+  setActiveIndex: (index: number) => void
+}) {
   const swiperRef = useRef<any>(null)
-  const handleVideoClick = useCallback((index: number) => {
-    setActiveIndex(index)
-  }, [setActiveIndex])
-
-  // 监听 activeIndex 变化：点击 bottom item 时同步 Swiper 跳转到对应 slide
+  // 是否点击bottom改变了activeIndex
+  const isInternalChange = useRef(false)
+  const listLength = myDataTemp.lifeList.length
+  const handleVideoClick = useCallback(
+    (index: number) => {
+      setActiveIndex(index)
+      console.log(index)
+    },
+    [setActiveIndex]
+  )
+  // 监听activeIndex变化
   useEffect(() => {
-    const swiper = swiperRef.current?.swiper
-    if (swiper) {
-      const isLoop = myDataTemp.lifeList.length > 4
-      if (isLoop) {
-        swiper.slideToLoop(activeIndex, 300)
-      } else {
-        swiper.slideTo(activeIndex, 300)
-      }
-    }
-  }, [activeIndex])
+    if (!swiperRef.current) return
+    isInternalChange.current = false
+    const index = activeIndex + 3 < listLength ? activeIndex + 3 : activeIndex + 3 - listLength
+    console.log(index, activeIndex)
+    swiperRef.current.swiper.slideToLoop(index)
+  }, [activeIndex, listLength])
   return (
     <div className={styles.SwiperComponent}>
       <Swiper
@@ -39,11 +48,13 @@ function SwiperComponent({ activeIndex, setActiveIndex }: { activeIndex: number,
           depth: 240, // 控制了3d视角的深度
           modifier: 3
         }}
-        pagination={false}
-        modules={[EffectCoverflow, Navigation]}
+        pagination={{ el: '.swiper-pagination', clickable: true }}
+        modules={[EffectCoverflow, Pagination, Navigation]}
         className='swiper_container'
         onSlideChange={(swiper: any) => {
-          handleVideoClick(swiper.realIndex)
+          const index = swiper.realIndex - 3 >= 0 ? swiper.realIndex - 3 : swiper.realIndex + listLength - 3
+          isInternalChange.current = true
+          handleVideoClick(index)
         }}
         onTransitionEnd={(swiper: any) => {
           const swiperInternal = swiper as { loopFix: () => void }
@@ -52,9 +63,8 @@ function SwiperComponent({ activeIndex, setActiveIndex }: { activeIndex: number,
       >
         {myDataTemp.lifeList.map((item, index) => (
           <SwiperSlide key={index}>
-            <div
-              className={`itemCard ${activeIndex === index ? 'itemCardActive' : ''}`}
-            >
+            <div className={`itemCard ${activeIndex === index ? 'itemCardActive' : ''}`}>
+              {item.name}
               <div className='itemImage'>
                 <img className='itemImageImg' src={item?.imgSrc} alt='' />
                 <img
@@ -67,6 +77,7 @@ function SwiperComponent({ activeIndex, setActiveIndex }: { activeIndex: number,
           </SwiperSlide>
         ))}
       </Swiper>
+      {/* <div className='swiper-pagination'></div> */}
 
       <div className='leftArrow' onClick={() => swiperRef.current?.swiper?.slidePrev()}>
         <img src={require('../../../assets/img/A6_life_left.png')} alt='' />