Tiempo de lectura: 2 minutos

Los carruseles de imágenes son una excelente manera de mostrar contenido de manera dinámica en una página web. En este tutorial, aprenderás a implementar un carrusel en React utilizando la librería Swiper.

1. Instalación de Swiper

Swiper es una de las librerías más populares para crear carruseles en la web. Para instalarla en tu proyecto de React, ejecuta el siguiente comando:

npm install swiper

2. Configuración del Carrusel

Primero, importa los módulos necesarios en tu componente.

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Navigation, Pagination, Autoplay } from "swiper/modules";

Luego, crea el componente del carrusel:

const ImageCarousel = () => {
  const images = [
    "https://via.placeholder.com/800x400?text=Imagen+1",
    "https://via.placeholder.com/800x400?text=Imagen+2",
    "https://via.placeholder.com/800x400?text=Imagen+3",
  ];

  return (
    <Swiper
      modules={[Navigation, Pagination, Autoplay]}
      spaceBetween={50}
      slidesPerView={1}
      navigation
      pagination={{ clickable: true }}
      autoplay={{ delay: 3000 }}
    >
      {images.map((image, index) => (
        <SwiperSlide key={index}>
          <img src={image} alt={`Slide ${index + 1}`} className="w-full h-auto" />
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

export default ImageCarousel;

3. Explicación del Código

• Swiper: Es el componente principal del carrusel.
• SwiperSlide: Representa cada diapositiva del carrusel.
• modules: Permite agregar funcionalidades como navegación, paginación y reproducción automática.
• slidesPerView: Define cuántas diapositivas se mostrarán al mismo tiempo.
• navigation: Activa los botones de navegación.
• pagination: Agrega indicadores de paginación que permiten navegar entre diapositivas.
• autoplay: Configura la reproducción automática con un retraso de 3 segundos.

4. Integración en la Aplicación

Para mostrar el carrusel en tu aplicación, importa y usa el componente en App.tsx o en cualquier otro archivo:

import ImageCarousel from "./ImageCarousel";

function App() {
  return (
    <div className="container mx-auto mt-10">
      <h1 className="text-center text-2xl font-bold mb-5">Carrusel de Imágenes</h1>
      <ImageCarousel />
    </div>
  );
}

export default App;

Este carrusel es fácil de personalizar y escalar. Puedes cambiar los estilos, agregar nuevas funcionalidades o integrar otros módulos de Swiper como efectos de transición.