diff options
Diffstat (limited to 'src/lib/product/components/ProductSlider.jsx')
| -rw-r--r-- | src/lib/product/components/ProductSlider.jsx | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx new file mode 100644 index 00000000..8d677547 --- /dev/null +++ b/src/lib/product/components/ProductSlider.jsx @@ -0,0 +1,51 @@ +import { Swiper, SwiperSlide } from "swiper/react" +import ProductCard from "./ProductCard" +import "swiper/css" +import Image from "@/core/components/elements/Image/Image" +import Link from "@/core/components/elements/Link/Link" +import { useState } from "react" + +const bannerClassName = 'absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6' + +const ProductSlider = ({ + products, + simpleTitle = false, + 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={`${bannerClassName} ${activeIndex > 0 ? 'opacity-0' : 'opacity-100'}`} + /> + ) } + <Swiper + freeMode={true} + slidesPerView={2.2} + spaceBetween={8} + onSlideChange={swiperSliderFirstMove} + prefix="product" + > + { bannerMode && ( + <SwiperSlide> + <Link href={products.banner.url} className="w-full h-full block"></Link> + </SwiperSlide> + ) } + { products?.products?.map((product, index) => ( + <SwiperSlide key={index}> + <ProductCard product={product} simpleTitle={simpleTitle} /> + </SwiperSlide> + )) } + </Swiper> + </> + ) +} + +export default ProductSlider
\ No newline at end of file |