mip-website/pages/components/Brands.js

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
  },
  {
    id: 12,
    title: ' داطا',
    img: imgslides.DATA
  },
  {
    id: 13,
    title: 'نوید پرتو نما',
    img: imgslides.navidparto
  },
  {
    id: 14,
    title: '  دریای طب اندیشان',
    img: imgslides.daryateb
  },
  {
    id: 15,
    title: '  سازه فراز قرن',
    img: imgslides.sazefaraz
  },
  {
    id: 16,
    title: '  ستاره فن آوری طب',
    img: imgslides.setarefanavar
  },
  {
    id: 17,
    title: ' سیما طب',
    img: imgslides.simateb
  },
  {
    id: 18,
    title: ' سیوان صنعت بار ثاوا',
    img: imgslides.sivansaneat
  },
  {
    id: 19,
    title: ' شهراب گستران اروند ',
    img: imgslides.shahrabgostaran
  },
  {
    id: 20,
    title: ' شینا سازه آریانا',
    img: imgslides.shinasaze
  },
  {
    id: 21,
    title: '  طراح تجهیز پویش مانا',
    img: imgslides.poyeshmana
  },
  {
    id: 22,
    title: '  عصر و صنعت آتبین',
    img: imgslides.asratin
  },
  {
    id: 23,
    title: ' تهویه  فراز',
    img: imgslides.tahveyefaraz
  },
  {
    id: 24,
    title: ' تک نوع خاورمیانه ',
    img: imgslides.taknoekhavar
  },
  {
    id: 25,
    title: ' پایامد الکترونیک',
    img: imgslides.payamaelectronic
  },
  {
    id: 26,
    title: ' پاکشویان آپادانا',
    img: imgslides.pakshoyanapadana
  },
  {
    id: 27,
    title: ' پارس نسیم دما ',
    img: imgslides.parasnasim
  },
  {
    id: 28,
    title: '  ایرانیان همگام',
    img: imgslides.iranianhamgam
  },
  {
    id: 29,
    title: '  آوان طب',
    img: imgslides.avanteb
  },
  {
    id: 30,
    title: ' آرین درمان پژوه ',
    img: imgslides.ariyandarman
  }
  ,
  {
    id: 31,
    title: '  آریا گردیک  ',
    img: imgslides.ariyagerdic
  }
,
  {
    id: 32,
    title: ' رستاک طب پارسه   ',
    img: imgslides.rastackteb
  },
]



function brands() {
  return (
    <div className='lg:mx-20 sm:mx-5 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>
    </div>
  );
}

export default brands;