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 slidesPerView?: number options?: any } const Carousel = (props: Props) => { const { height, images, delay, animation = "slide", isLogo = false, slidesPerView = 5, } = props const options = props.options ?? {} const oClass = options.class || {} return ( <div className={twMerge( `flex items-center ${height} ${ isLogo ? "" : "h-auto min-w-full" } overflow-hidden`, oClass.body )} > <Swiper slidesPerView={isLogo ? slidesPerView : "auto"} spaceBetween={isLogo ? 1 : 0} autoplay={{ delay: delay, disableOnInteraction: false, }} loop={true} speed={ animation == "slide" || animation == "coverflow" ? 1500 : 3000 } effect={animation} // navigation modules={[Autoplay, Navigation, EffectFade, EffectCoverflow]} > {images.length > 1 ? ( images.map((item: any, key: any) => { return ( <SwiperSlide key={key} className={twMerge(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 ${isLogo ? "" : ""}`, oClass.image )} objectFit="fill" /> </div> </SwiperSlide> ) }) ) : ( <SwiperSlide className={twMerge(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={images.src} className={twMerge( `w-full ${isLogo ? "" : ""}`, oClass.image )} objectFit="fill" /> </div> </SwiperSlide> )} </Swiper> </div> ) } export default Carousel