Carousel.tsx

import React, { useEffect, useState } from "react"
import Image from "./Image"
interface DataImage {
    src: string
}

interface Props {
    images: Array<DataImage>
    delay?: number
}

const Carousel = (props: Props) => {
    const { images, delay } = props
    const [index, setIndex] = useState(1)

    const nbr_image: number = images.length

    const updateIndex = (newIndex: number) => {
        if (newIndex < 0) {
            newIndex = nbr_image - 1
        } else if (newIndex >= nbr_image) {
            newIndex = 0
        }

        setIndex(newIndex)
    }

    useEffect(() => {
        const interval = setInterval(() => {
            if (delay != 0) {
                updateIndex(index + 1)
            }
        }, delay)

        return () => {
            if (interval) {
                clearInterval(interval)
            }
        }
    })

    return (
        <div className={`flex items-center `}>
            <div className="relative">
                <div className="btn-carousel  absolute z-50 left-3 -mt-5">
                    <button
                        onClick={() => updateIndex(index - 1)}
                        className={`bg-neutral rounded-3xl w-10 h-10 text-base-100`}
                    >
                        ❮
                    </button>
                </div>
            </div>
            <div
                className={`inline-block align-middle carousel  w-full truncate max-h-80`}
            >
                <div
                    className={`whitespace-nowrap w-full `}
                    style={{
                        transform: `translateX(-${index * 100}%)`,
                        transition: "transform 0.3s",
                    }}
                >
                    {images.map((item: any, key: any) => {
                        return (
                            <div
                                className={`carousel-item relative w-full inline-block mr-0`}
                                key={key}
                            >
                                <Image image={item.src} className="w-full" />
                            </div>
                        )
                    })}
                </div>
            </div>
            <div className="relative">
                <div className="btn-carousel absolute z-50 right-3 -mt-5">
                    <button
                        onClick={() => updateIndex(index + 1)}
                        className={`bg-neutral rounded-3xl w-10 h-10 text-base-100`}
                    >
                        ❯
                    </button>
                </div>
            </div>
        </div>
    )
}

export default Carousel