Cómo usar: Generador de Swiper
- Elige las opciones de tu slider Swiper y el contenido de las diapositivas: paneles de demo, tus propias URLs de imágenes o tarjetas.
- Define los slides por vista para escritorio, tableta y móvil, además del espacio, el efecto, el bucle, el autoplay, las flechas y la paginación.
- Revisa la vista previa en vivo con anchos de escritorio, tableta y móvil.
- Copia el HTML, CSS y JavaScript (CDN o npm), o descarga una página HTML completa.
Acerca de Swiper
Swiper es el slider táctil más usado en la web: sin dependencias de frameworks, con aceleración por hardware y repleto de módulos (navegación, paginación, autoplay, teclado, rueda del ratón, modo libre, carga diferida, accesibilidad y siete efectos de transición). La versión 11 se distribuye como un único paquete para usar con CDN o como módulos ES desde npm.
Opciones clave que genera este generador
| Opción | Qué hace |
|---|---|
slidesPerView + breakpoints | Slides visibles a la vez; los breakpoints son mobile-first (768: { slidesPerView: 2 } se aplica desde 768 px en adelante) |
spaceBetween | Espacio entre slides en px |
loop | Bucle infinito; Swiper 11 necesita al menos slidesPerView × 2 slides para un bucle fluido |
autoplay | delay, pauseOnMouseEnter y disableOnInteraction: false para que el autoplay se reanude tras deslizar |
effect | fade (con crossFade), cube, coverflow, flip, cards, creative |
pagination.type | bullets, fraction o progressbar |
Estilos
Swiper lee la variable CSS --swiper-theme-color para las flechas y los puntos activos; el color de acento que elijas se escribe ahí. Otras variables incluyen --swiper-navigation-size y --swiper-pagination-bullet-size.
Uso con npm y frameworks
Cambia la opción de instalación a npm para obtener import Swiper from 'swiper/bundle'. En React, Vue o Svelte puedes usar Swiper Element (web components) o los componentes oficiales de React con las mismas opciones como props.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Tamaño (mín. + gzip, JS) | ~40 KB (bundle) | ~12 KB | ~7 KB | ~12 KB + jQuery ~30 KB |
| Dependencias | Ninguna | Ninguna | Ninguna | jQuery |
| Efectos | Deslizar, fade, cube, coverflow, flip, cards, creative | Deslizar, fade | Deslizar | Deslizar, fade |
| Vertical | Sí | Sí | No | Sí |
| Accesibilidad | Buena (módulo a11y) | Excelente (ARIA por defecto) | Básica | Básica |
| Mantenimiento | Sí | Sí | Lento | No (última versión en 2017) |
| Licencia | MIT en las cuatro | |||
También se busca como: generador swiper js, swiper slider, ejemplo carrusel swiper, swiper breakpoints, swiper autoplay, swiper cdn, carrusel swiper coverflow.
Herramientas que combinan con: Generador de Swiper
- Generador de Carruseles — Configura un carrusel con clics en lugar de leer la documentación: elige una librería, define breakpoints, efectos y controles, mira la vista previa en vivo y copia el HTML, CSS y JavaScript listos para producción.
- Generador de Splide Slider — Crea un carrusel Splide accesible y ligero sin leer la documentación: define las opciones, revisa la vista previa en tres tamaños de pantalla y copia el código.
- Generador de Glide.js — Crea un carrusel Glide.js mínimo — el slider de unos 7 KB, sin dependencias — con breakpoints responsive, flechas y puntos, y copia el código.
- Cambiador de tamaño de imágenes — Cambia el tamaño de una foto a unas dimensiones exactas en píxeles o a un porcentaje, recórtala para que se adapte al tamaño de las redes sociales o encájala en un marco con un color de fondo, todo ello directamente en tu navegador.
Preguntas frecuentes
¿Por qué no funciona el bucle de Swiper?
¿Cómo funcionan los breakpoints de Swiper?
¿Cómo cambio el color de las flechas?
--swiper-theme-color en el slider (el color de acento lo hace por ti) o aplica estilos a .swiper-button-next y .swiper-button-prev.