From 0ca24278cdec32c30a909a10df6680ec4578d932 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 31 Jan 2023 16:43:24 +0700
Subject: brightness change on slide product

---
 src/components/products/ProductSlider.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'src/components')

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>
-- 
cgit v1.2.3