Create an image carousel with a 3D effect using React

Tiempo de lectura: 3 minutos

Today, I bring you a step-by-step tutorial to create the QuantumCarousel component in React with 3D animations and smooth transitions.

 

Step 1: Project Setup

Make sure you have Node.js and npm installed on your machine. Then, create a new React project using Create React App:

npx create-react-app quantum-carousel-tutorial
cd quantum-carousel-tutorial

Step 2: Project Structure

Organize your project by creating a QuantumCarousel component and a CSS file QuantumCarousel.css for styles.

src/
-- components/
   -- QuantumCarousel.js
-- App.js
-- App.css
-- QuantumCarousel.css

Step 3: Install Dependencies

Install necessary dependencies for animations and transitions:

npm install react-transition-group

Step 4: Implement QuantumCarousel

Create the QuantumCarousel.js component in the components folder:

// components/QuantumCarousel.js
import React, { useState, useEffect } from 'react';
import './QuantumCarousel.css';

const QuantumCarousel = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      const nextIndex = (currentIndex + 1) % images.length;
      setCurrentIndex(nextIndex);
    }, 3000); // Cambia de imagen cada 3 segundos

    return () => clearInterval(interval);
  }, [currentIndex, images.length]);

  const handlePrev = () => {
    const prevIndex = (currentIndex - 1 + images.length) % images.length;
    setCurrentIndex(prevIndex);
  };

  const handleNext = () => {
    const nextIndex = (currentIndex + 1) % images.length;
    setCurrentIndex(nextIndex);
  };

  return (
    <div className="quantum-carousel">
      <div className="carousel-container">
        {images.map((image, index) => (
          <div
            key={index}
            className={`carousel-item ${index === currentIndex ? 'active' : ''}`}
            style={{ backgroundImage: `url(${image.src})` }}
          >
            <h2>{image.title}</h2>
          </div>
        ))}
      </div>
      <button className="carousel-button prev" onClick={handlePrev}>
        &#8249;
      </button>
      <button className="carousel-button next" onClick={handleNext}>
        &#8250;
      </button>
    </div>
  );
};

export default QuantumCarousel;

// components/QuantumCarousel.js
import React, { useState, useEffect } from 'react';
import './QuantumCarousel.css';

const QuantumCarousel = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      const nextIndex = (currentIndex + 1) % images.length;
      setCurrentIndex(nextIndex);
    }, 3000); // Cambia de imagen cada 3 segundos

    return () => clearInterval(interval);
  }, [currentIndex, images.length]);

  const handlePrev = () => {
    const prevIndex = (currentIndex - 1 + images.length) % images.length;
    setCurrentIndex(prevIndex);
  };

  const handleNext = () => {
    const nextIndex = (currentIndex + 1) % images.length;
    setCurrentIndex(nextIndex);
  };

  return (
    <div className="quantum-carousel">
      <div className="carousel-container">
        {images.map((image, index) => (
          <div
            key={index}
            className={`carousel-item ${index === currentIndex ? 'active' : ''}`}
            style={{ backgroundImage: `url(${image.src})` }}
          >
            <h2>{image.title}</h2>
          </div>
        ))}
      </div>
      <button className="carousel-button prev" onClick={handlePrev}>
        &#8249;
      </button>
      <button className="carousel-button next" onClick={handleNext}>
        &#8250;
      </button>
    </div>
  );
};

export default QuantumCarousel;

Setp 5: CSS Styles

Create a file named QuantumCarousel.css in the same folder with your component:

/* components/QuantumCarousel.css */
.quantum-carousel {
  position: relative;
  width: 80%;
  margin: 20px auto;
  overflow: hidden;
}

.carousel-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-item {
  flex: 0 0 100%;
  height: 300px;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  transform: scale(1);
  opacity: 0.8;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.carousel-item h2 {
  margin: 0;
}

.carousel-item.active {
  transform: scale(1.2);
  opacity: 1;
  z-index: 1;
}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  outline: none;
}

.carousel-button.prev {
  left: 10px;
}

.carousel-button.next {
  right: 10px;
}

Step 6: Add to App.js

Use the component QuantumCarrousel in your App.js

// App.js
import React from 'react';
import QuantumCarousel from './components/QuantumCarousel';

const App = () => {
  const images = [
    { src: 'image1.jpg', title: 'Imagen 1' },
    { src: 'image2.jpg', title: 'Imagen 2' },
    { src: 'image3.jpg', title: 'Imagen 3' },
    // Agrega más imágenes según sea necesario
  ];

  return (
    <div>
      <h1>¡Carrusel Cuántico Impresionante!</h1>
      <QuantumCarousel images={images} />
    </div>
  );
};

export default App;

// App.js
import React from 'react';
import QuantumCarousel from './components/QuantumCarousel';

const App = () => {
  const images = [
    { src: 'image1.jpg', title: 'Imagen 1' },
    { src: 'image2.jpg', title: 'Imagen 2' },
    { src: 'image3.jpg', title: 'Imagen 3' },
    // Agrega más imágenes según sea necesario
  ];

  return (
    <div>
      <h1>¡Carrusel Cuántico Impresionante!</h1>
      <QuantumCarousel images={images} />
    </div>
  );
};

export default App;

Step 7: Exec your APP

Use this command:

npm start