diff options
| -rw-r--r-- | src-migrate/modules/promo/components/Hero.tsx | 35 |
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']}> |