Unintentionally I have created my own carousel that can extended to meet your needs

main.tsx

const images = [
  "https:/...",
  "https:/...",
  "https:/...",
];

const Carousel = () => {
  const [index,setIndex] = useState(0);

  const goToNextSlide = () => {
    // check for last slide and reset to 0
    setIndex((prevIndex) =>
      prevIndex === images.length - 1 ? 0 : prevIndex + 1
    );
  };

  const goToPrevSlide = () => {
    // check for first slide and set it to last slide index
    setIndex((prevIndex) =>
      prevIndex === 0 ? images.length - 1 : prevIndex - 1
    );
  };

return (
  <div className="overflow-x-hidden rounded-lg">
     <div
        className="flex w-full transition-transform duration-500 ease-in-out "
        style={{
            transform: `translateX(-${index * 100}%)`,
        }}
       >
          {images.map((image, index) => (
            <div
              key={index}
              className="w-full flex flex-shrink-0"
            >
             
              <img
                src={image}
                alt={`Image ${index + 1}`}
                className="object-cover w-full h-full"
              />
            </div>
          ))}
        </div>
      </div>
  );

}

You can add buttons to go back and forth