feat: add partners slider

src/widgets/partners-slider/ui.tsx

@@ -0,0 +1,54 @@
+'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 };