¿Cómo agregar carrusel de imágenes en NextJS?

En este artículo, vamos a aprender cómo podemos agregar un carrusel de imágenes en NextJS. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac.

Enfoque: para crear nuestro carrusel de imágenes, vamos a utilizar un paquete de carrusel que responde a reacciones porque es potente, liviano y totalmente personalizable. Después de eso, agregaremos nuestras imágenes como carruseles en nuestra página de inicio usando el paquete instalado.

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app gfg

Paso 2: después de crear la carpeta de su proyecto, es decir, gfg, acceda a ella con el siguiente comando.

cd gfg

Paso 3: ahora instalaremos el paquete react-responsive-carousel usando el siguiente comando

npm i react-responsive-carousel

Estructura del proyecto: Se verá así.

Creación de carrusel de imágenes: para crear nuestro carrusel de imágenes, necesitamos algunas imágenes. Entonces, para este ejemplo, vamos a usar las siguientes imágenes.

• https://media.geeksforgeeks.org/wp-content/uploads/20211213172224/1.png
• https://media.geeksforgeeks.org/wp-content/uploads/20211213172225/2.png
• https://media.geeksforgeeks.org/wp-content/uploads/20211213172226/3.png
• https://media.geeksforgeeks.org/wp-content/uploads/20211213172227/4.png
• https://media.geeksforgeeks.org/wp-content/uploads/20211213172229/5.png

Ahora agregue las imágenes a la carpeta pública . Una vez que las imágenes estén listas, solo necesitamos agregar estas imágenes a nuestro carrusel. 

Ejemplo: Para este ejemplo, estamos creando el carrusel en nuestra página de inicio. Así que agregue el siguiente código en el archivo index.js.

import React, { Component } from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
  
export default class NextJsCarousel extends Component {
    render() {
        return (
            <div>
              <h2>NextJs Carousel - GeeksforGeeks</h2>
              <Carousel>
                  <div>
                      <img src="/1.png" alt="image1"/>
                      <p className="legend">Image 1</p>
  
                  </div>
                  <div>
                      <img src="/2.png" alt="image2" />
                      <p className="legend">Image 2</p>
  
                  </div>
                  <div>
                      <img src="/3.png" alt="image3"/>
                      <p className="legend">Image 3</p>
  
                  </div>
                  <div>
                      <img src="/4.png" alt="image4"/>
                      <p className="legend">Image 4</p>
  
                  </div>
                  <div>
                      <img src="/5.png" alt="image5"/>
                      <p className="legend">Image 5</p>
  
                  </div>
              </Carousel>
            </div>
        );
    }
};

En el ejemplo anterior, primero importamos el componente de carrusel del paquete instalado. Luego estamos usando este componente para crear nuestro carrusel.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm run dev

Producción: