Carousel.tsx

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