fix

2 files changed, 21 insertions, 11 deletions

diff --git a/src/lib/product/api/productApi.js b/src/lib/product/api/productApi.js
index 6fe8901e..4fe4cd7d 100644
--- a/src/lib/product/api/productApi.js
+++ b/src/lib/product/api/productApi.js
@@ -1,6 +1,7 @@
 import odooApi from '@/core/api/odooApi'
 
 const productApi = async ({ id }) => {
+  if (!id) return
   const dataProduct = await odooApi('GET', `/api/v1/product/${id}`)
   return dataProduct
 }
diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index aafd3cf1..eeea7acc 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -1,34 +1,43 @@
 import { Swiper, SwiperSlide } from 'swiper/react'
+import { FreeMode } from 'swiper'
 import ProductCard from './ProductCard'
 import 'swiper/css'
+import 'swiper/css/free-mode'
 import Image from '@/core/components/elements/Image/Image'
 import Link from '@/core/components/elements/Link/Link'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 
 const bannerClassName =
   'absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6'
 
 const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => {
-  const [activeIndex, setActiveIndex] = useState(0)
-  const swiperSliderFirstMove = (swiper) => {
-    setActiveIndex(swiper.activeIndex)
+  const bannerRef = useRef('')
+
+  const onSliderMove = (swiper) => {
+    if (!bannerMode) return
+    const calculateOpacity = (132 + swiper.translate) / 100
+    bannerRef.current.style = `opacity: ${calculateOpacity > 0 ? calculateOpacity : 0}`
   }
 
   return (
     <>
       {bannerMode && (
-        <Image
-          src={products.banner.image}
-          alt={products.banner.name}
-          className={`${bannerClassName} ${activeIndex > 0 ? 'opacity-0' : 'opacity-100'}`}
-        />
+        <div ref={bannerRef}>
+          <Image
+            src={products.banner.image}
+            alt={products.banner.name}
+            style={{ opacity: 1 }}
+            className={bannerClassName}
+          />
+        </div>
       )}
       <Swiper
-        freeMode={true}
+        freeMode={{ enabled: true, sticky: false }}
         slidesPerView={2.2}
         spaceBetween={8}
-        onSlideChange={swiperSliderFirstMove}
+        onSliderMove={onSliderMove}
         prefix='product'
+        modules={[FreeMode]}
       >
         {bannerMode && (
           <SwiperSlide>