54 lines
1.2 KiB
JavaScript
54 lines
1.2 KiB
JavaScript
"use client";
|
|
import { brandLogos } from "@/data/brands";
|
|
import { Autoplay } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import Image from "next/image";
|
|
export default function Brands() {
|
|
const swiperOptions = {
|
|
spaceBetween: 30,
|
|
speed: 2500,
|
|
loop: true,
|
|
modules: [Autoplay],
|
|
autoplay: {
|
|
delay: 2500,
|
|
disableOnInteraction: false,
|
|
},
|
|
breakpoints: {
|
|
1199: {
|
|
slidesPerView: 5,
|
|
},
|
|
991: {
|
|
slidesPerView: 4,
|
|
},
|
|
767: {
|
|
slidesPerView: 3,
|
|
},
|
|
575: {
|
|
slidesPerView: 2,
|
|
},
|
|
0: {
|
|
slidesPerView: 2,
|
|
},
|
|
},
|
|
};
|
|
return (
|
|
<div className="container">
|
|
<Swiper {...swiperOptions} className="swiper brand-slider">
|
|
{brandLogos.map((src, index) => (
|
|
<SwiperSlide key={index} className="swiper-slide">
|
|
<div className="brand-image center">
|
|
<Image
|
|
width={92}
|
|
height={120}
|
|
style={{ objectFit: "contain" }}
|
|
src={src}
|
|
alt={`Brand logo ${index + 1}`}
|
|
/>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
);
|
|
}
|