1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
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 { useMemo, useRef } from 'react'
import useDevice from '@/core/hooks/useDevice'
import MobileView from '@/core/components/views/MobileView'
import DesktopView from '@/core/components/views/DesktopView'
const bannerClassName =
'absolute rounded-r top-0 left-0 h-full w-auto md:w-[20%] 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}`
}
const swiperProps = {
onSliderMove: changeBannerOpacity,
onSlideChangeTransitionStart: changeBannerOpacity,
onSlideChangeTransitionEnd: changeBannerOpacity,
prefix: 'product',
modules: [FreeMode],
freeMode: { enabled: true, sticky: false }
}
const swiperContent = useMemo(() => {
return (
<>
{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>
))}
</>
)
}, [bannerMode, products, simpleTitle])
return (
<>
{bannerMode && (
<div ref={bannerRef}>
<Image
src={products.banner.image}
alt={products.banner.name}
style={{ opacity: 1 }}
className={bannerClassName}
/>
</div>
)}
<MobileView>
<Swiper slidesPerView={2.2} spaceBetween={12} {...swiperProps}>
{swiperContent}
</Swiper>
</MobileView>
<DesktopView>
<Swiper slidesPerView={6.7} spaceBetween={16} {...swiperProps}>
{swiperContent}
</Swiper>
</DesktopView>
</>
)
}
export default ProductSlider
|
