Repolode
Enviar
nolimits4web

nolimits4web/swiper

Slider JavaScript gratuito, pensado primero para pantallas táctiles, para sitios web y apps móviles, con transiciones aceleradas por hardware y sin dependencia de jQuery.

Ver en GitHubSitio web
Estrellas
41,906
Forks
9,582
Issues abiertos
247
Último commit
hace 6 días

¿Qué es?

Swiper es una biblioteca de sliders en JavaScript centrada en la interacción táctil para sitios web móviles, apps web móviles y apps nativas o híbridas. Usa un diseño de slides basado en flexbox, por lo que el tamaño de las slides y las cuadrículas se pueden controlar con CSS y con parámetros de inicialización como la cantidad de slides visibles, la cantidad de slides por grupo y el espacio entre ellas.

La biblioteca incluye paginación, flechas de navegación y una barra de desplazamiento, y admite el modo de bucle, la reproducción automática, el control con teclado y rueda del mouse, la carga diferida de imágenes y slides virtuales que mantienen en el DOM solo las slides necesarias. Los efectos de transición incluyen fundido, volteo, cubo 3D y coverflow 3D. Varias instancias de Swiper pueden controlarse entre sí y también se admiten diseños RTL.

Swiper admite tree shaking, incluye tipos de TypeScript y se distribuye a través de npm y jsDelivr. Su README enlaza a demos oficiales de uso con Core, React y Vue.

Funciones clave

  • 01Slider pensado primero para pantallas táctiles, con movimiento táctil 1:1 configurable.
  • 02Diseño de slides con flexbox y control de la cantidad de slides visibles, los grupos y el espacio entre ellas.
  • 03Paginación, flechas de navegación y barra de desplazamiento integradas.
  • 04Efectos de transición de fundido, volteo, cubo 3D y coverflow 3D.
  • 05Carga diferida y slides virtuales para carruseles con muchas imágenes o de gran tamaño.
  • 06Módulos compatibles con tree shaking, tipos de TypeScript y sin dependencia de jQuery.

Casos de uso

  • Crear galerías de imágenes o carruseles de productos en sitios web adaptados a móviles.
  • Añadir secciones de introducción o banners deslizables a apps web móviles.
  • Crear diseños de slides en varias filas o columnas mediante configuración con CSS puro.
  • Vincular un slider de miniaturas con uno principal para que se controlen entre sí.

Inicio rápido

  1. 1

    Instala Swiper desde npm

    npm install swiper
  2. 2

    Compila la versión de desarrollo (ejecuta el comando en la raíz del repositorio después de clonarlo)

    npm install && npm run build
  3. 3

    Ejecuta la demo de Core desde la carpeta playground

    npm run core

Antes de usarlo

  • No es compatible con todas las plataformas; está dirigido únicamente a navegadores modernos y aplicaciones móviles.

Temas

#carousel#slider#touch#mobile#javascript#typescript#ui-component#gallery#swipe#swiper

Preguntas frecuentes

¿Qué es swiper?
Slider JavaScript gratuito, pensado primero para pantallas táctiles, para sitios web y apps móviles, con transiciones aceleradas por hardware y sin dependencia de jQuery. Swiper es una biblioteca de sliders en JavaScript centrada en la interacción táctil para sitios web móviles, apps web móviles y apps nativas o híbridas. Usa un diseño de slides basado en flexbox, por lo que el tamaño de las slides y las cuadrículas se pueden controlar con CSS y con parámetros de inicialización como la cantidad de slides visibles, la cantidad de slides por grupo y el espacio entre ellas.
¿swiper es gratuito? ¿Qué licencia tiene?
swiper es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿swiper sigue mantenido?
Mantenimiento activo. El último commit de swiper fue el 16 oct 2026.
¿Para qué puedo usar swiper?
Crear galerías de imágenes o carruseles de productos en sitios web adaptados a móviles. Añadir secciones de introducción o banners deslizables a apps web móviles. Crear diseños de slides en varias filas o columnas mediante configuración con CSS puro. Vincular un slider de miniaturas con uno principal para que se controlen entre sí.
¿Cómo se instala swiper?
Instala Swiper desde npm: npm install swiper Compila la versión de desarrollo (ejecuta el comando en la raíz del repositorio después de clonarlo): npm install && npm run build Ejecuta la demo de Core desde la carpeta playground: npm run core
¿Dónde consigo swiper?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/nolimits4web/swiper

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados