Clientele.js 1.51 KB
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import Image from "next/image";

const Clientele = ({
  partners = [],
  spaceBetween = 30,
  autoplayDelay = 3000,
  slidesPerViewBreakpoints = {
    0: { slidesPerView: 2 },
    576: { slidesPerView: 3 },
    768: { slidesPerView: 4 },
    992: { slidesPerView: 5 },
  },
  sliderClassName = "partner-slides",
  itemClassName = "single-partner-item",
}) => {
  return (
    <div className="partner-area">
      <div className="container">
        <Swiper
          spaceBetween={spaceBetween}
          breakpoints={slidesPerViewBreakpoints}
          autoplay={{
            delay: autoplayDelay,
            disableOnInteraction: true,
            pauseOnMouseEnter: true,
          }}
          modules={[Autoplay]}
          className={sliderClassName}
        >
          {partners &&
            partners.map((logo) => (
              <SwiperSlide className={itemClassName} key={logo.id}>
                <div className="justify-content-center align-items-center gap-5">
                  <a href={logo.link} className="d-inline-block">
                    <Image
                      src={logo.image}
                      alt={logo.altText}
                      className="img-fluid image"
                      layout="fill"
                    />
                  </a>
                </div>
              </SwiperSlide>
            ))}
        </Swiper>
      </div>
    </div>
  );
};

export default Clientele;