Carousel.tsx

import React from "react";

interface DataImage {
  src: string;
}

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

const Carousel = (props: Props) => {
  const { images, isLogo, delay } = props;
  const [index, setIndex] = React.useState(1);
  // const [leftAndRightDisabled, setLeftAndRightDisabled] = React.useState(false);
  // const [stateSlides, setStateSlides] = React.useState<any[]>([]);

  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);
  };

  // React.useEffect(() => {
  //   const slidesWithClones = [...images];
  //   slidesWithClones.unshift(slidesWithClones[slidesWithClones.length - 1]);
  //   slidesWithClones.push(slidesWithClones[1]);
  //   setStateSlides(slidesWithClones);

  //   // ...
  // }, []);

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

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

  return (
    <div className="block relative">
      <div
        className={`carousel ${isLogo ? "w-[50%] ml-20" : "w-full"} truncate`}
      >
        <div
          className={`whitespace-nowrap ${isLogo ? "w-[25%]" : "w-full"} `}
          style={{
            transform:
             isLogo ?
              nbr_image > 4
                ? `translateX(-${index * 60 }%)`
                : `translateX(0)`
                : `translateX(-${index * 100}%)`,
            transition: "transform 0.3s",
          }}
        >
          {images.map((item: any, key: any) => {
            return (
              <div
                className={`carousel-item relative w-full inline-block`}
                key={key}
              >
                {isLogo ? (
                  <div className="flex justify-center items-center w-full">
                    <img
                      src={item.src}
                      className="w-28 h-28  border border-gray-600 p-4"
                    />
                  </div>
                ) : (
                  <img src={item.src} className="w-full h-[384px]" />
                )}
              </div>
            );
          })}
        </div>
      </div>
      <div
        className={`absolute flex justify-between pl-5 pr-5 ${
          isLogo ? "w-[62%]" : "w-full"
        }  ${isLogo ? "mt-[0%] top-9" : " mt-[0%] top-[47%]"} `}
      >
        <button
          onClick={() => updateIndex(index - 1)}
          className={`bg-[#5A5C68] rounded-3xl  ${
            isLogo ? "w-5" : "w-10"
          } h-10 text-white`}
        >
          ❮
        </button>
        <button
          onClick={() => updateIndex(index + 1)}
          className={`bg-[#5A5C68] rounded-3xl  ${
            isLogo ? "w-5" : "w-10"
          } h-10 text-white`}
        >
          ❯
        </button>
      </div>
    </div>
  );
};

export default Carousel;