From 7cbd033633ebc549ce06cff278b197c4f186f9dd Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 14:54:18 +0700
Subject: fix

---
 src/lib/product/components/ProductSlider.jsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 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 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]}
       >
-- 
cgit v1.2.3

