145 lines
3.5 KiB
JavaScript
145 lines
3.5 KiB
JavaScript
import React from "react";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import "swiper/swiper-bundle.min.css";
|
|
import "swiper/swiper.min.css";
|
|
|
|
import Link from "next/link";
|
|
import { MDBContainer } from "mdb-react-ui-kit";
|
|
import { imgslides } from "../../src/redux/static";
|
|
|
|
|
|
|
|
const slides= [
|
|
{
|
|
id: 1,
|
|
title: " شرکت گازهای طبی ره پویان توسعه تهران",
|
|
img: imgslides.a,
|
|
},
|
|
{
|
|
id: 2,
|
|
title: " شرکت پیاوار",
|
|
img: imgslides.b,
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "شرکت کارپذیر",
|
|
img: imgslides.c,
|
|
},
|
|
{
|
|
id: 4,
|
|
title: " شرکت فنی مهندسی کهربا تراشه",
|
|
img: imgslides.d,
|
|
},
|
|
{
|
|
id: 5,
|
|
title: " شرکت پویندگان راه سعادت",
|
|
img: imgslides.e,
|
|
},
|
|
{
|
|
id: 6,
|
|
title: " صنایع چوبی دکو مهر",
|
|
img: imgslides.f,
|
|
},
|
|
{
|
|
id: 7,
|
|
title: "شرکت لوازم اداری سهند",
|
|
img: imgslides.g,
|
|
},
|
|
{
|
|
id: 8,
|
|
title: " شرکت طب و صنعت یاسین",
|
|
img: imgslides.h
|
|
},
|
|
{
|
|
id: 9,
|
|
title: " شرکت مون گارشو",
|
|
img: imgslides.i,
|
|
},
|
|
{
|
|
id: 10,
|
|
title: " شرکت پویان تهویه",
|
|
img: imgslides.j,
|
|
},
|
|
{
|
|
id: 11,
|
|
title: " کاربین برج",
|
|
img: imgslides.k,
|
|
},
|
|
];
|
|
|
|
|
|
const brands = () => {
|
|
return (
|
|
<MDBContainer className={"mt-5"}>
|
|
<div className="flex justify-center">
|
|
<h3 className="bk-med font-bold">سهامداران پروژه</h3>
|
|
</div>
|
|
<div className="">
|
|
<Swiper
|
|
// slidesPerGroup={3}
|
|
// loopFillGroupWithBlank={true}
|
|
slidesPerView={"auto"}
|
|
// spaceBetween={50}
|
|
className="mySwiper"
|
|
onSwiper={(swiper) => console.log(swiper)}
|
|
onSlideChange={() => console.log("slide change")}
|
|
loop={true}
|
|
autoplay={{
|
|
delay: 2000,
|
|
autoplayDisableOnInteraction: false,
|
|
}}
|
|
breakpoints={{
|
|
1200: {
|
|
slidesPerView: 4,
|
|
spaceBetween: 50,
|
|
},
|
|
1024: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 30,
|
|
},
|
|
768: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 20,
|
|
},
|
|
640: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 20,
|
|
},
|
|
320: {
|
|
slidesPerView: 1,
|
|
spaceBetween: 30,
|
|
},
|
|
}}
|
|
>
|
|
{slides.map((slide) => {
|
|
return (
|
|
<SwiperSlide className="slidesBrands" key={slide.id}>
|
|
<Link href="#">
|
|
<div className="card-content">
|
|
<div className="image w-full">
|
|
<img
|
|
src={slide.img}
|
|
className="lg:w-[70%] md:w-[65%] m-auto slidimg "
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div className="detail flex text-center mt-[1.5rem] ">
|
|
<p className="compony font-bold text-[0.8rem] text-[#1e1e2d] ">
|
|
{slide.title}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</SwiperSlide>
|
|
);
|
|
})}
|
|
|
|
|
|
</Swiper>
|
|
</div>
|
|
</MDBContainer>
|
|
);
|
|
};
|
|
|
|
export default brands;
|