brightness change on slide product

1 files changed, 8 insertions, 2 deletions

diff --git a/src/components/products/ProductSlider.js b/src/components/products/ProductSlider.js
index 4cc98eb7..d52449b8 100644
--- a/src/components/products/ProductSlider.js
+++ b/src/components/products/ProductSlider.js
@@ -4,17 +4,23 @@ import "swiper/css";
 import Image from "../elements/Image";
 import Link from "../elements/Link";
 import { SkeletonProduct } from "../elements/Skeleton";
+import { useEffect, useRef, useState } from "react";
 
 export default function ProductSlider({ 
   products, 
   bannerMode = false 
 }) {
+  const [ activeIndex, setActiveIndex ] = useState(0);
+  const swiperSliderFirstMove = (swiper) => {
+    setActiveIndex(swiper.activeIndex);
+  };
+
   return (
     <>
       { bannerMode && (
-        <Image src={products.banner.image} alt={products.banner.name} className="absolute top-0 left-0 h-full max-w-[55%]" />
+        <Image src={products.banner.image} alt={products.banner.name} className={`absolute top-0 left-0 h-full max-w-[55%] idt-transition ` + (activeIndex > 0 ? 'brightness-75' : 'brightness-100')} />
       ) }
-      <Swiper freeMode={true} slidesPerView={2.2} spaceBetween={8}>
+      <Swiper freeMode={true} slidesPerView={2.2} spaceBetween={8} onSlideChange={swiperSliderFirstMove}>
         { bannerMode && (
           <SwiperSlide>
             <Link href={`/shop/search?category=${products.name}`} className="w-full h-full block"></Link>