diff --git a/src/components/layout/TopTabsSection/TopTabs.tsx b/src/components/layout/TopTabsSection/TopTabs.tsx
index e23d3b9..ba5bc55 100644
--- a/src/components/layout/TopTabsSection/TopTabs.tsx
+++ b/src/components/layout/TopTabsSection/TopTabs.tsx
@@ -11,8 +11,8 @@ type Data = {
         contentSubtitle?: string;
         contentText?: string;
         content?: string;
-        /** 以 mockData 为准，tabItems 可能使用 sideImage 或 backgroundImage */
-        sideImage?: string;
+        /** 以 mockData 为准，tabItems 可能使用 sideImage 或 backgroundImage；string[] 时右侧为轮播 */
+        sideImage?: string | string[];
         path?: string;
     }[],
     backgroundImage?: string;
diff --git a/src/components/layout/TopTabsSection/index.module.css b/src/components/layout/TopTabsSection/index.module.css
index ac8c8ed..91ffa19 100644
--- a/src/components/layout/TopTabsSection/index.module.css
+++ b/src/components/layout/TopTabsSection/index.module.css
@@ -74,15 +74,15 @@
 
 .topTabsBottomLine {
     position: absolute;
-    bottom: -1px;
-    height: .125rem;
+    bottom: 0px;
+    height: 1px;
     background: #14355C;
     transition: left 0.25s ease, width 0.25s ease;
     z-index: 1;
 }
 .topTabsBottomLineWhite {
     position: absolute;
-    bottom: -1px;
+    bottom: 0px;
     width: 100%;
     height: .125rem;
     background: #D5D8DC;
@@ -177,9 +177,26 @@
     img {
         width: 50rem;
         height: 31.25rem;
+        object-fit: cover;
+        display: block;
     }
 }
 
+.sideImageSwiper {
+    width: 50rem;
+    height: 31.25rem;
+    --swiper-pagination-color: #14355c;
+    --swiper-pagination-bullet-inactive-color: #d5d8dc;
+    --swiper-pagination-bullet-inactive-opacity: 1;
+    --swiper-pagination-bottom: 0.5rem;
+}
+
+.sideImageSwiper :global(.swiper-slide) img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
 .topTabsContentItems {
     margin: 0 auto;
     display: grid;
@@ -214,9 +231,18 @@
         gap: 2.5rem;
     }
 
-    .topTabsContentRight img {
+    .topTabsContentRight img,
+    .sideImageSwiper {
         width: 100%;
         height: auto;
+        min-height: 12rem;
+    }
+
+    .sideImageSwiper :global(.swiper-slide) img {
+        width: 100%;
+        height: auto;
+        max-height: 50vh;
+        object-fit: cover;
     }
 
     .topTabsContentItems {
diff --git a/src/components/layout/TopTabsSection/index.tsx b/src/components/layout/TopTabsSection/index.tsx
index ca8b115..9cc7223 100644
--- a/src/components/layout/TopTabsSection/index.tsx
+++ b/src/components/layout/TopTabsSection/index.tsx
@@ -3,7 +3,10 @@ import styles from './index.module.css';
 import TopTabs from './TopTabs';
 import { useLocation } from 'react-router-dom';
 import ScrollReveal from '@/components/ScrollReveal';
-
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Pagination } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/pagination';
 
 type Data = {
     tabItems: {
@@ -13,15 +16,21 @@ type Data = {
         contentSubtitle?: string;
         contentText?: string;
         content?: string;
-        /** 以 mockData 为准 */
-        sideImage?: string;
+        /** 以 mockData 为准；传 string[] 时为右侧轮播 */
+        sideImage?: string | string[];
         path?: string;
-        items?: {label: string}[];
+        items?: { label: string }[];
     }[]
     backgroundImage?: string;
     titleDirection?: 'row' | 'column';
 }
 
+function sideImageToSlides(sideImage: string | string[] | undefined): string[] {
+    if (Array.isArray(sideImage)) return sideImage.filter(Boolean);
+    if (sideImage) return [sideImage];
+    return [];
+}
+
 export default function TopTabsSection({ data, className }: { data: Data, className?: string }) {
     const location = useLocation();
     const hash = location.hash;
@@ -36,6 +45,9 @@ export default function TopTabsSection({ data, className }: { data: Data, classN
             }
         }
     }, [hashId, data.tabItems])
+
+    const sideSlides = sideImageToSlides(data.tabItems[activeIndex]?.sideImage);
+
     return (
         <section className={`${styles.topTabsSection} ${className}`} style={{ backgroundImage: `url(${data.backgroundImage})` }}>
             <div aria-hidden="true">
@@ -47,53 +59,75 @@ export default function TopTabsSection({ data, className }: { data: Data, classN
             <div className={styles.topTabsContent}>
                 {
                     data.tabItems[activeIndex]?.items && (data.tabItems[activeIndex]?.items as any).length > 0 ?
-                <ul className={styles.topTabsContentItems}>
-                    {
-                        (data.tabItems[activeIndex]?.items as any).map((item: {label: string}) => (
-                            <li key={item.label} className={styles.topTabsContentItem}>
-                                <span>{item.label}</span>
-                            </li>
-                        ))
-                    }
-                </ul> : (
-                <>
-                    <div className={styles.topTabsContentLeft}>
-                        <div className={styles.topTabsContentLeftHead}>
+                        <ul className={styles.topTabsContentItems}>
                             {
-                                <ScrollReveal preset="slideRight" delay={0.3} >
-                                {
-                                    data.tabItems[activeIndex].icon && (
-                                        <img src={data.tabItems[activeIndex].icon} alt="" style={{ width: '6.25rem', height: '6.25rem', marginRight: '1.25rem' }} />
-                                    )
-                                }
-                                </ScrollReveal>
+                                (data.tabItems[activeIndex]?.items as any).map((item: { label: string }) => (
+                                    <li key={item.label} className={styles.topTabsContentItem}>
+                                        <span>{item.label}</span>
+                                    </li>
+                                ))
                             }
-                            <div className={`${styles.topTabsContentLeftTitle} ${data.titleDirection === 'column' ? styles.columnCenter : ''}`}>
-                                
-                                <ScrollReveal preset="slideUp" delay={0.5} duration={1.1}>
-                                <div className={styles.topTabsContentLeftTitleMain}>{data.tabItems[activeIndex].contentTitle}</div>
-                                </ScrollReveal>
-                                <ScrollReveal preset="slideUp" delay={0.7} duration={1.1}>
-                                <div className={styles.topTabsContentLeftTitleSub}>{data.tabItems[activeIndex].contentSubtitle}</div>
-                                </ScrollReveal>
-                            </div>
-                        </div>
-                        <ScrollReveal preset="slideUp" delay={0.9} duration={1.1}>
-                            <p className={`${styles.topTabsContentLeftDesc} normal-p`}
-                            
-                            dangerouslySetInnerHTML={{ __html: data.tabItems[activeIndex].contentText ?? data.tabItems[activeIndex].content as any }}
-                            >
-                                {/* {data.tabItems[activeIndex].contentText ?? data.tabItems[activeIndex].content} */}
-                            </p>
-                        </ScrollReveal>
-                    </div>
-                    <div className={styles.topTabsContentRight}>
-                        <ScrollReveal preset="slideLeft" delay={0.5} >
-                        <img src={data.tabItems[activeIndex].sideImage} alt="side-image" />
-                        </ScrollReveal>
-                    </div>
-                </>
-                )
+                        </ul> : (
+                            <>
+                                <div className={styles.topTabsContentLeft}>
+                                    <div className={styles.topTabsContentLeftHead}>
+                                        {
+                                            <ScrollReveal preset="slideRight" delay={0.3} >
+                                                {
+                                                    data.tabItems[activeIndex].icon && (
+                                                        <img src={data.tabItems[activeIndex].icon} alt="" style={{ width: '6.25rem', height: '6.25rem', marginRight: '1.25rem' }} />
+                                                    )
+                                                }
+                                            </ScrollReveal>
+                                        }
+                                        <div className={`${styles.topTabsContentLeftTitle} ${data.titleDirection === 'column' ? styles.columnCenter : ''}`}>
+
+                                            <ScrollReveal preset="slideUp" delay={0.5} duration={1.1}>
+                                                <div className={styles.topTabsContentLeftTitleMain}>{data.tabItems[activeIndex].contentTitle}</div>
+                                            </ScrollReveal>
+                                            <ScrollReveal preset="slideUp" delay={0.7} duration={1.1}>
+                                                <div className={styles.topTabsContentLeftTitleSub}>{data.tabItems[activeIndex].contentSubtitle}</div>
+                                            </ScrollReveal>
+                                        </div>
+                                    </div>
+                                    <ScrollReveal preset="slideUp" delay={0.9} duration={1.1}>
+                                        <p className={`${styles.topTabsContentLeftDesc} normal-p`}
+
+                                            dangerouslySetInnerHTML={{ __html: data.tabItems[activeIndex].contentText ?? data.tabItems[activeIndex].content as any }}
+                                        >
+                                            {/* {data.tabItems[activeIndex].contentText ?? data.tabItems[activeIndex].content} */}
+                                        </p>
+                                    </ScrollReveal>
+                                </div>
+                                <div className={styles.topTabsContentRight}>
+                                    <ScrollReveal preset="slideLeft" delay={0.5} >
+                                        {sideSlides.length > 1 ? (
+                                            <Swiper
+                                                className={styles.sideImageSwiper}
+                                                modules={[Autoplay, Pagination]}
+                                                slidesPerView={1}
+                                                spaceBetween={0}
+                                                loop
+                                                allowTouchMove
+                                                autoplay={{
+                                                    delay: 4500,
+                                                    disableOnInteraction: false,
+                                                }}
+                                                pagination={{ clickable: true }}
+                                            >
+                                                {sideSlides.map((src, i) => (
+                                                    <SwiperSlide key={`${src}-${i}`}>
+                                                        <img src={src} alt="" />
+                                                    </SwiperSlide>
+                                                ))}
+                                            </Swiper>
+                                        ) :  (
+                                            <img src={sideSlides[0] || sideSlides as any} alt="" />
+                                        )}
+                                    </ScrollReveal>
+                                </div>
+                            </>
+                        )
                 }
 
             </div>