diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/product/components/ProductSlider.jsx | 9 |
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]} > |