category, brand, product popular, product category in desktop home page

1 files changed, 5 insertions, 3 deletions

diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index 060d4638..ed7db486 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -5,12 +5,14 @@ import 'swiper/css'
 import Image from '@/core/components/elements/Image/Image'
 import Link from '@/core/components/elements/Link/Link'
 import { useRef } from 'react'
+import useDevice from '@/core/hooks/useDevice'
 
 const bannerClassName =
-  'absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6'
+  'absolute rounded-r top-0 left-0 h-full w-auto md:w-[20%] idt-transition border border-gray_r-6'
 
 const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => {
   const bannerRef = useRef('')
+  const { isMobile } = useDevice()
 
   const changeBannerOpacity = (swiper) => {
     if (!bannerMode) return
@@ -32,8 +34,8 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
       )}
       <Swiper
         freeMode={{ enabled: true, sticky: false }}
-        slidesPerView={2.2}
-        spaceBetween={8}
+        slidesPerView={isMobile ? 2.2 : 5.6}
+        spaceBetween={isMobile ? 8 : 16}
         onSliderMove={changeBannerOpacity}
         onSlideChangeTransitionEnd={changeBannerOpacity}
         onSlideChangeTransitionStart={changeBannerOpacity}