import React from "react" import Image from "./Image" import { Swiper, SwiperSlide } from "swiper/react" import { Navigation, Autoplay, EffectFade, EffectCoverflow } from "swiper" // Import Swiper styles import "swiper/css" import "swiper/css/navigation" import "swiper/css/effect-fade" import "swiper/css/effect-coverflow" import { twMerge } from "tailwind-merge" interface DataImage { src: string } interface Props { height?: string images: Array<DataImage> delay?: number animation?: "slide" | "fade" | "coverflow" isLogo?: boolean options?: any } const Carousel = (props: Props) => { const { height, images, delay, animation = "slide", isLogo = false } = props const options = props.options ?? {} const oClass = options.class || {} return ( <div className={twMerge("overflow-hidden", oClass.body)}> <Swiper slidesPerView={isLogo ? 2 : "auto"} spaceBetween={isLogo ? 10 : 0} autoplay={{ delay: delay, disableOnInteraction: false, }} loop={true} speed={ animation == "slide" || animation == "coverflow" ? 1500 : 3000 } effect={animation} breakpoints={{ 640: { slidesPerView: isLogo ? 3 : "auto", spaceBetween: 20, }, 768: { slidesPerView: isLogo ? 4 : "auto", spaceBetween: 40, }, 1024: { slidesPerView: isLogo ? options.swiper?.slidesPerView || 5 : "auto", spaceBetween: 50, }, }} // effect="creative" // creativeEffect={{ // prev: { // // will set `translateZ(-400px)` on previous slides // translate: [0, 0, -400], // }, // next: { // // will set `translateX(100%)` on next slides // translate: ["100%", 0, 0], // }, // }} // navigation modules={[Autoplay, Navigation, EffectFade, EffectCoverflow]} // {...options.swiper} > {images.map((item: any, key: any) => { return ( <SwiperSlide key={key} className={twMerge( "flex items-center justify-center", oClass.swiperSlide )} > <div className={twMerge( "w-full", isLogo ? "flex h-36 w-36 items-center justify-center rounded-lg bg-white p-2" : "", oClass.SwiperSlide )} > <Image image={item.src} className={twMerge( "w-full", height, // Hack // Sometimes on build mode GastbyImage is converted to simple 'img' // need to pass extra CSS to manage image resize isLogo ? "object-contain" : "object-cover", // oClass.image )} objectFit={isLogo ? "contain" : "cover"} /> </div> </SwiperSlide> ) })} </Swiper> </div> ) } export default Carousel