Swiper en React: Slider y carrusel tipo Tinder con SwiperJS

Si estás buscando cómo crear un Swiper en React, quédate en este nuevo post donde hablaré cómo hacerlo. Aunque este componente que generalmente vemos en las páginas webs, es algo complejo, el paquete swiper.js para react lo hace mucho más sencillo de implementar.

Lo que vas a necesitar

• Repositorio en github: haz click aquí para ver el repositorio.
• Video de youtube: haz click aquí para ver el video en mi canal sobre este post.
• Swiper.js: haz click aquí para ver el paquete que usaremos para crear el swiper.

Instalar Swiper JS

El primer paso para poder comenzar a crear nuestros swiper o sliders en React es instalar el paquete o librería dentro de nuestro componente de react. Es importante aclarar que para este punto ya tienes que tener todo tu desarrollo en react listo, para que Swiper JS llegue a complementar. Vamos a instalar con el comando (recuerda ejecutarlo en la terminal correspondiente donde se encuentre tu proyecto de react):

sudo npm install swiper

Generalmente siempre voy a recomendar utilizar «sudo» en la instalación de los paquetes para poder filtrar posibles errores en la instalación. Ahora el siguiente paso es importar el paquete dentro del componente:

import {Swiper, SwiperSlide} from 'swiper/react';
import { EffectCards, Pagination,  } from 'swiper/modules';
// import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/effect-cards';

en esta etapa ya tenemos todo listo para comenzar a utilizar swiper js en nuestro componente como tal.

Crear arreglo de slides

Ahora lo que sigue es crear el arreglo de objetos que contiene los slides a usar, este es un ejemplo que puedes usar:

const slides = [
    {
      id: 1,
      titulo: "imagen 1",
      fuenteImagen: "/imagenes/1.jpg",
      texto: "hola imagen 1",
      textoBoton: "ver más",
      enlaceBoton: "/"
    },
    {
      id: 2,
      titulo: "imagen 2",
      fuenteImagen: "/imagenes/2.jpg",
      texto: "hola imagen 2",
      textoBoton: "ver más",
      enlaceBoton: "/"
    },
    {
      id: 3,
      titulo: "imagen 3",
      fuenteImagen: "/imagenes/3.jpg",
      texto: "hola imagen 3",
      textoBoton: "ver más",
      enlaceBoton: "/"
    }
  ]

De este arreglo podemos notar que cada posición tiene su propio «id» el cual será usado a continuación al implementar en frontend. Así mismo se crean varias propiedades que puede contener genralmente un bloque de contenido en un swiper o slider como titulo, imagen, texto, enlace, entre otros.

Crear swiper sencillo con Pagination

Para este punto debemos entender qué la forma de desplegar el Swiper se divide en dos: etapa de configuración del Swiper, y etapa demostrar el contenido (recorriendo el arreglo). Entonces vamos a evaluar ambas etapas para saber cómo funciona.

Configuración de Swiper

<Swiper 
        modules={[Pagination]} 
        pagination={{clickable: true}}
        spaceBetween={16}
        slidesPerView={1}
        style={{maxWidth: 900, margin: '0 auto'}}
      >

en esta primera etapa vamos a darnos cuenta que la librería o el paquete contiene diferentes módulos. Estos módulos permiten diferentes características o diferentes escenarios para su uso. En este caso utilizaremos el módulo: «Pagination». Este nos va a permitir cambiar de un Slide a otro, por medio de una paginación. Es decir podemos ver puntualmente los botones inferiores o las flechas para poder navegar en el mismo.

También podemos notar que podemos configurar cuántos Slides se van a mostrar al usuario en el contenedor principal. Por ejemplo si dejamos dos, entonces el usuario verá dos Slides antes de deslizar.

Recorrer y mostrar arreglo de Slides

{slides.map( (slideActual) => (
        <SwiperSlide key={slideActual.id} >
          {/* contenedor */}
          <div style={ { borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(0, 0, 0, 0.08)', background: '#fff'} }   >
            {/* imagen */}
            <img src={slideActual.fuenteImagen} alt={slideActual.titulo} style={{width: '100%', height: 'auto', display: 'block'}} />

            {/* contenedor adicional */}
            <div style={{ padding: 18 }}>
              <h2>{slideActual.titulo}</h2>
              <p>{slideActual.texto}</p>

              <button type='button' className='btn btn-primary' onClick={ () => funcionBoton(slideActual.enlaceBoton)} >
                {slideActual.textoBoton}
              </button>
            </div>

          </div>
        </SwiperSlide>
      ))}


      </Swiper>

En esa segunda etapa lo que vamos a anotar es que debemos recorrer el arreglo «slides» creado previamente, el cual contiene la información que vamos a mostrar: imagen, título, texto, enlace, o bien cualquier otra propiedad que busquemos añadir.

Resultado

en este resultado podemos ver que contamos con tres diferentes Slides, los cuales son los que configuramos en el paso uno. Asimismo si oprimimos en alguno de los otros botones o círculos vamos a poder avanzar o retroceder. Esto lo convierte en un Swiper sencillo, que puede ser utilizado tanto en dispositivos móviles como en computadores.

Crear swiper tipo tinder

en este caso aunque el paquete nos ofrece algunos demos de pago, vamos a construir un Swiper tipo Tinder, el cual a medida que arrastramos con el dedo, el Slide principal desaparece para dar lugar a un nuevo Slide. ¿Cómo lo logramos?, vamos a empezar.

<div className='my-5'>
        <h2 className='mb-5'>Swiper tipo tinder</h2>

        <div style={{display: 'flex', justifyContent: 'center'}}>
          <div style={{width: 320, height: 420}}>
            <Swiper 
              effect='cards'
              modules={[EffectCards]} 
              grabCursor={true}
              style={{width: '100%', height: '100%'}}
            >


            {slidesTinder.map( (slideActual) => (
            <SwiperSlide key={slideActual.id} >
              {/* contenedor */}
              <div style={ { width: '100%', height: '100%', borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(0, 0, 0, 0.08)', background: '#fff', display: 'flex', flexDirection: 'column', boxSizing: 'border-box'} }   >
                {/* imagen */}
                <img src={slideActual.fuenteImagen} alt={slideActual.titulo} style={{ width: '100%', height: 260, objectFit: 'cover', flex: '0 0 auto' }} />


                {/* contenedor adicional */}
                <div style={{ padding: 16, flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }} >
                  
                  <div>
                    <h3 style={{ margin: 0 }}>{slideActual.titulo}</h3>
                    <p>{slideActual.texto}</p>
                  </div>

                  <button type='button' className='btn btn-primary mt-3' onClick={ () => funcionBoton(slideActual.enlaceBoton)} >
                    {slideActual.textoBoton}
                  </button>
                </div>

              </div>
            </SwiperSlide>
          ))}

            
              
            </Swiper> 
          </div>
        </div>
        
      </div>

En este ejemplo vamos a anotar en la etapa uno de configuración que vamos a añadir un efecto tipo Card, o tarjetas. Es curioso porque Bootstrap, lo cual si no lo sabes lo utilizo bastante en varios de mis proyectos, también tiene ese tipo de componente. Este componente es usado en la mayoría si tus web por qué permite organizar el contenido de una manera muy precisa para mostrar información y generar interacción.

Entonces lo que hacemos en este paso es asignar a este Swiper, un efecto tipo card. Asimismo añadimos su módulo, y activamos en modo arrastrar, para que el usuario tenga que arrastrar un Slide para dar paso al siguiente.

cómo pasa siguiente vamos a recorrer el arreglo SlidesTinder, que prácticamente es lo mismo porque contiene: título, imagen, texto, etc. Solamente que lo vamos a organizar de una manera diferente hablando de estilo.

una vez implementado vamos a poder ver que los Slides cambian solamente arrastrándolos.

Video de ayuda

Hice este video para guiarte en el proceso, haz click para verlo y si te gusta no olvides dar like y suscribirte para nuevos videos.

Producto sugerido

Uno de los mejores teclados del mercado, con firmware QMK, permitiendo que sea prácticamente 100% personalizable, desde teclas, luces, acciones por teclas, teclas duales, entre otros.

Conclusión

Implementar correctamente un Swiper en React te permite mejorar muchísimo la experiencia de usuario, sobre todo en móvil: reduces fricción, destacas contenido clave y guías la navegación de forma natural. A lo largo del post vimos cómo crear un carrusel funcional con Pagination, controlar el comportamiento del slider y estructurar cada slide con imagen, texto y botón para que sea reutilizable y fácil de mantener.

Además, al aplicar efectos como Effect Cards (estilo Tinder), puedes crear interfaces más modernas e interactivas sin complicarte con lógica manual de arrastre. Lo importante es elegir el tipo de Swiper según el objetivo: un carrusel clásico para contenido informativo y uno tipo cards para experiencias más dinámicas. Con buenas prácticas de responsive, estilos consistentes y una estructura clara, tendrás un componente listo para usar en proyectos reales.