(andri) fix slider banner promo

1 files changed, 20 insertions, 15 deletions

diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
index e1b31184..1004932b 100644
--- a/src-migrate/modules/promo/components/Hero.tsx
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -39,7 +39,7 @@ const swiperBannerMob = {
   },
   modules: [Pagination, Autoplay],
   loop: true,
-  className: 'mobile-swiper w-full', 
+  className: 'mobile-swiper w-full',
   slidesPerView: 1,
 };
 
@@ -54,10 +54,24 @@ const Hero = () => {
     [heroBanner.data]
   );
 
-  const swiperBannerMobile = {
+  const isSingleSlide = banners.length <= 1;
+
+  const swiperSettingsDesktop = useMemo(() => ({
+    ...swiperBanner,
+    loop: !isSingleSlide,
+    allowTouchMove: !isSingleSlide,
+    autoplay: isSingleSlide ? false : swiperBanner.autoplay,
+    pagination: isSingleSlide ? false : swiperBanner.pagination,
+  }), [isSingleSlide]);
+
+
+  const swiperSettingsMobile = useMemo(() => ({
     ...swiperBannerMob,
-    pagination: { dynamicBullets: false, clickable: true },
-  };
+    loop: !isSingleSlide,
+    allowTouchMove: !isSingleSlide,
+    autoplay: isSingleSlide ? false : swiperBannerMob.autoplay,
+    pagination: isSingleSlide ? false : { dynamicBullets: false, clickable: true },
+  }), [isSingleSlide]);
 
   return (
     <>
@@ -77,18 +91,9 @@ const Hero = () => {
       `}</style>
       <DesktopView>
         <div className={style['desktop-container']}>
-          <Swiper {...swiperBanner} spaceBetween={10}>
+          <Swiper {...swiperSettingsDesktop} spaceBetween={10}>
             {banners?.map((banner, index) => (
               <SwiperSlide key={index} className='flex flex-row'>
-                
-                {/*  
-                <div className={style['desc-section']}>
-                  <div className={style['title']}>
-                     ...
-                  </div>
-                </div> 
-                */}
-
                 <div className={style['desktop-image-wrapper']}>
                   <Image
                     src={banner.image}
@@ -106,7 +111,7 @@ const Hero = () => {
       </DesktopView>
       <MobileView>
         <div className={style['mobile-container']}>
-          <Swiper {...swiperBannerMobile}>
+          <Swiper {...swiperSettingsMobile}>
             {banners?.map((banner, index) => (
               <SwiperSlide key={index}>
                 <div className={style['mobile-image-wrapper']}>