1 files changed, 64 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..060d4638
--- /dev/null
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -0,0 +1,64 @@
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { FreeMode } from 'swiper'
+import ProductCard from './ProductCard'
+import 'swiper/css'
+import Image from '@/core/components/elements/Image/Image'
+import Link from '@/core/components/elements/Link/Link'
+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'
+
+const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => {
+  const bannerRef = useRef('')
+
+  const changeBannerOpacity = (swiper) => {
+    if (!bannerMode) return
+    const calculateOpacity = (132 + swiper.translate) / 100
+    bannerRef.current.style = `opacity: ${calculateOpacity > 0 ? calculateOpacity : 0}`
+  }
+
+  return (
+    <>
+      {bannerMode && (
+        <div ref={bannerRef}>
+          <Image
+            src={products.banner.image}
+            alt={products.banner.name}
+            style={{ opacity: 1 }}
+            className={bannerClassName}
+          />
+        </div>
+      )}
+      <Swiper
+        freeMode={{ enabled: true, sticky: false }}
+        slidesPerView={2.2}
+        spaceBetween={8}
+        onSliderMove={changeBannerOpacity}
+        onSlideChangeTransitionEnd={changeBannerOpacity}
+        onSlideChangeTransitionStart={changeBannerOpacity}
+        prefix='product'
+        modules={[FreeMode]}
+      >
+        {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