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