diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/products/ProductSlider.js | 10 |
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> |