55 lines
1.1 KiB
TypeScript
55 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import 'swiper/css';
|
|
import 'swiper/css/navigation';
|
|
import 'swiper/css/grid';
|
|
import 'swiper/css/autoplay';
|
|
import s from './styles.module.scss';
|
|
|
|
import Image from 'next/image';
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
import { Autoplay, Grid } from 'swiper/modules';
|
|
import { slidesData } from '@widgets/partners-slider/model/slides';
|
|
|
|
const swiperBreakpoints = {
|
|
360: {
|
|
slidesPerView: 1,
|
|
spaceBetween: 10,
|
|
},
|
|
768: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 30,
|
|
},
|
|
1024: {
|
|
slidesPerView: 4,
|
|
spaceBetween: 30,
|
|
},
|
|
1440: {
|
|
slidesPerView: 5,
|
|
spaceBetween: 30,
|
|
},
|
|
};
|
|
|
|
function PartnersSlider() {
|
|
return (
|
|
<Swiper
|
|
className={s.Slider}
|
|
modules={[Grid, Autoplay]}
|
|
breakpoints={swiperBreakpoints}
|
|
autoplay={{
|
|
delay: 2000,
|
|
disableOnInteraction: false,
|
|
}}
|
|
loop={true}
|
|
>
|
|
{slidesData.map(({ id, name, image }) => (
|
|
<SwiperSlide key={id} className={s.Slide}>
|
|
<Image src={image} alt={name} quality={75} />
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
);
|
|
}
|
|
|
|
export { PartnersSlider };
|