Swiper: el slider táctil que no te va a arruinar el sprint

Esta es la entrega #10 de es la librería de sliders/carousels táctiles más completa del ecosistema web moderno. Cero dependencias externas. Wrappers oficiales para React, Vue, Angular y Web Components. Transiciones aceleradas por hardware que en iOS y Android se sienten como si fueran nativas.

No estamos hablando de un jQuery plugin glorificado. Swiper tiene su propio sistema de módulos que podés importar selectivamente: paginación, navegación con flechas, lazy loading de imágenes, autoplay, thumbnails, efectos de parallax, zoom, y una docena de transiciones (fade, cube, flip, cards). Todo esto sin meter media librería de terceros en el bundle.

La API en React es declarativa y bastante limpia:

import { Swiper, SwiperSlide } from 'swiper/react';

// Importamos solo los módulos que necesitamos — clave para no inflar el bundle

import { Navigation, Pagination, Lazy } from 'swiper/modules';

import 'swiper/css';

import 'swiper/css/navigation';

import 'swiper/css/pagination';



function ProductCarousel({ productos }) {

  return (

    <Swiper

      modules={[Navigation, Pagination, Lazy]}

      spaceBetween={16}       // espacio entre slides en px

      slidesPerView={1.2}     // mostramos un poco del próximo slide (patrón UX clásico en mobile)

      navigation                // flechas prev/next

      pagination={{ clickable: true }}

      lazy={true}              // lazy loading nativo — no cargamos imágenes fuera del viewport

      breakpoints={{

        // en desktop mostramos más slides — responsive sin media queries extra

        768: { slidesPerView: 2.5 },

        1200: { slidesPerView: 3.5 },

      }}

    >

      {productos.map((p) => (

        <SwiperSlide key={p.id}>

          <img

            data-src={p.imagen}   // data-src para lazy loading

            className="swiper-lazy"

            alt={p.nombre}

          />

          <p>{p.nombre}</p>

        </SwiperSlide>

      ))}

    </Swiper>

  );

}

El CSS lo podés importar modularmente también. Si no usás el módulo de scrollbar, no importás el CSS de scrollbar. Simple.

Por abajo, Swiper usa transform: translate3d() y will-change para forzar que el navegador delegue las animaciones a la GPU. El resultado es que el scroll táctil tiene inercia real —con deceleración física que respeta los parámetros del sistema operativo— en lugar del comportamiento robótico que tenés con CSS puro o la mayoría de las alternativas.

El sitio oficial con la documentación completa está en tiene más de 39k estrellas. No es hype reciente: lleva años acumulando ese consenso.

Por qué está en la lista

Swiper apareció en 4 awesome lists independientes. Cuando un componente de UI específico —no un framework, no una librería de propósito general, sino un slider— logra ese nivel de consenso, algo está haciendo bien.

La diferencia con alternativas como no es que Swiper sea objetivamente mejor en todo —Embla es notablemente más liviano— sino que Swiper tiene los wrappers oficiales más completos, la documentación más exhaustiva, y el soporte multi-framework sin necesitar adaptadores de terceros. Si trabajás en un equipo donde hay proyectos en React, Vue y Angular simultáneamente, tener una sola librería que funciona igual en los tres es un activo real.

El sistema de módulos también importa. Antes de que Swiper lo implementara bien, la queja recurrente era el bundle size. Hoy, si importás solo Navigation y Pagination sin nada más, el impacto en el bundle es mucho más razonable. El ~30kb gzip que figura como número de referencia es para el paquete completo con todos los efectos y módulos.

Además —y esto es algo que aprecio mucho como alguien que vivió migraciones dolorosas— el equipo publica changelogs detallados y guías de migración entre versiones mayores. La API cambió bastante de v6 a v8 y de v8 a v11, sí, pero no te dejan solos en el proceso.

Cuándo NO usarlo

Primer caso honesto: si tu carousel tiene tres slides fijos y no necesitás touch, probablemente Swiper sea overkill. Para eso existe CSS puro con scroll-snap-type. Cero JavaScript, cero dependencias, soporte nativo en todos los browsers modernos:

/* Un carousel básico táctil solo con CSS — sin JS */

.carousel {

  display: flex;

  overflow-x: auto;

  scroll-snap-type: x mandatory;  /* snap al slide más cercano */

  -webkit-overflow-scrolling: touch; /* inercia en iOS */

  gap: 16px;

}



.carousel-slide {

  scroll-snap-align: start;  /* cada slide hace snap desde el inicio */

  flex: 0 0 80%;             /* cada slide ocupa el 80% del ancho */

}

Segundo caso: si el performance es crítico y el bundle size te duele, mirá . Si llegaste acá directo y no viste el resto de la serie, hay posts que vale la pena revisar: el de son buenos puntos de entrada si te interesa el ecosistema de herramientas más allá del ML. El próximo post de la serie sigue el mismo criterio: una herramienta que apareció en múltiples listas, que pasó el filtro automatizado, y que yo revisé personalmente antes de escribir una sola palabra sobre ella.

Este artículo fue publicado originalmente en juanchi.dev