JSX Carousel

App.js

import React from 'react';
import Carousel from "./Carousel";

const images = [
  { src: "https://images.pexels.com/photos/3635300/pexels-photo-3635300.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", alt: "Image 1" },
  { src: "https://images.pexels.com/photos/315938/pexels-photo-315938.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", alt: "Image 2" },
  { src: "https://images.pexels.com/photos/388417/pexels-photo-388417.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", alt: "Image 3" },
];

function App() {
  const renderOverlay = (index) => (
    <div
      style={{
        position: "absolute",
        bottom: 0,
        left: 0,
        backgroundColor: "rgba(0, 0, 0, 0.5)",
        color: "#fff",
        padding: "10px",
        fontSize: "1.2rem",
      }}
    >
      {`Image ${index + 1}`}
    </div>
  );

  return (
    <div className="App">
        <h1>Carousel Demo</h1>
        <Carousel
          images={images}
          autoplay={true}
          delay={3000}
          fadeDuration={1000}
          overlay={renderOverlay}
        />
      </div>
  );
}

export default App;

carousel.css

.carousel {
  position: relative;
  width: 100%;
  height: 500px;
}

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  width: 100%;
  height: 100%;
}

.carousel img.active {
  opacity: 1;
}

.carousel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  font-size: 1.2rem;
}

Carousel.jsx

import React, { useState, useEffect } from "react";
import "./carousel.css";

const Carousel = ({ images, autoplay, delay, fadeDuration, overlay }) => {
  const [currentImage, setCurrentImage] = useState(0);

  useEffect(() => {
    if (autoplay) {
      const intervalId = setInterval(() => {
        setCurrentImage((currentImage + 1) % images.length);
      }, delay);
      return () => clearInterval(intervalId);
    }
  }, [autoplay, delay, currentImage, images.length]);

  return (
    <div style={{ position: "relative", width: "100%", height: "100%" }}>
      {images.map((image, index) => (
        <img
          key={index}
          src={image.src}
          alt={image.alt}
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            opacity: index === currentImage ? 1 : 0,
            transition: `opacity ${fadeDuration}ms ease-in-out`,
            width: "100%",
            height: "100%",
          }}
        />
      ))}
      {overlay && overlay(currentImage)}
    </div>
  );
};

export default Carousel;