Website/components/slider/BrandActiveSlider.js
2025-04-08 14:37:17 +07:00

64 lines
1.4 KiB
JavaScript

"use client";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
const swiperOptions = {
modules: [Autoplay, Pagination, Navigation],
slidesPerView: 1,
spaceBetween: 30,
loop: true,
autoplay: {
delay: 1500,
disableOnInteraction: false,
},
breakpoints: {
992: {
slidesPerView: 4,
},
768: {
slidesPerView: 3,
},
576: {
slidesPerView: 3,
},
0: {
slidesPerView: 2,
},
},
};
export default function BrandActiveSlider() {
return (
<>
<Swiper {...swiperOptions}>
<SwiperSlide>
<div className="brand-item">
<img src="/assets/img/custom/COX-MEDIA.png" alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="brand-item">
<img src="/assets/img/custom/logo_cl.png" alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="brand-item">
<img src="/assets/img/custom/brand-3.png" alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="brand-item">
<img src="/assets/img/custom/brand-5.png" alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="brand-item">
<img src="/assets/img/custom/brand-7.png" alt="" />
</div>
</SwiperSlide>
</Swiper>
</>
);
}