From 311bf133d0f8520566ab3e99f442c2ca6b710449 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 11 Apr 2023 15:26:24 +0700
Subject: fix product slider layout

---
 src/lib/product/components/ProductSlider.jsx | 46 +++++++++++++++-------------
 1 file changed, 24 insertions(+), 22 deletions(-)

(limited to 'src/lib/product/components/ProductSlider.jsx')

diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index c8bd3a82..931a8db7 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -12,7 +12,7 @@ const bannerClassName =
 
 const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => {
   const bannerRef = useRef('')
-  const { isMobile } = useDevice()
+  const { isMobile, isDesktop } = useDevice()
 
   const changeBannerOpacity = (swiper) => {
     if (!bannerMode) return
@@ -32,27 +32,29 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
           />
         </div>
       )}
-      <Swiper
-        freeMode={{ enabled: true, sticky: false }}
-        slidesPerView={isMobile ? 2.2 : 5.6}
-        spaceBetween={isMobile ? 8 : 16}
-        onSliderMove={changeBannerOpacity}
-        onSlideChangeTransitionEnd={changeBannerOpacity}
-        onSlideChangeTransitionStart={changeBannerOpacity}
-        prefix='product'
-        modules={[FreeMode]}
-      >
-        {bannerMode && (
-          <SwiperSlide>
-            <Link href={products.banner.url} className='w-full h-full block'></Link>
-          </SwiperSlide>
-        )}
-        {products?.products?.map((product, index) => (
-          <SwiperSlide key={index}>
-            <ProductCard product={product} simpleTitle={simpleTitle} />
-          </SwiperSlide>
-        ))}
-      </Swiper>
+      {(isMobile || isDesktop) && (
+        <Swiper
+          freeMode={{ enabled: true, sticky: false }}
+          slidesPerView={isMobile ? 2.2 : 5.6}
+          spaceBetween={isMobile ? 8 : 16}
+          onSliderMove={changeBannerOpacity}
+          onSlideChangeTransitionEnd={changeBannerOpacity}
+          onSlideChangeTransitionStart={changeBannerOpacity}
+          prefix='product'
+          modules={[FreeMode]}
+        >
+          {bannerMode && (
+            <SwiperSlide>
+              <Link href={products.banner.url} className='w-full h-full block'></Link>
+            </SwiperSlide>
+          )}
+          {products?.products?.map((product, index) => (
+            <SwiperSlide key={index}>
+              <ProductCard product={product} simpleTitle={simpleTitle} />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      )}
     </>
   )
 }
-- 
cgit v1.2.3

