fix

1 files changed, 5 insertions, 4 deletions

diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index eeea7acc..0dab2f6b 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -2,10 +2,9 @@ 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 { useRef, useState } from 'react'
+import { useRef } from 'react'
 
 const bannerClassName =
   'absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6'
@@ -13,7 +12,7 @@ const bannerClassName =
 const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => {
   const bannerRef = useRef('')
 
-  const onSliderMove = (swiper) => {
+  const changeBannerOpacity = (swiper) => {
     if (!bannerMode) return
     const calculateOpacity = (132 + swiper.translate) / 100
     bannerRef.current.style = `opacity: ${calculateOpacity > 0 ? calculateOpacity : 0}`
@@ -35,7 +34,9 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
         freeMode={{ enabled: true, sticky: false }}
         slidesPerView={2.2}
         spaceBetween={8}
-        onSliderMove={onSliderMove}
+        onSliderMove={changeBannerOpacity}
+        onSlideChangeTransitionEnd={changeBannerOpacity}
+        onSlideChangeTransitionStart={changeBannerOpacity}
         prefix='product'
         modules={[FreeMode]}
       >