← Documentación
General

Swiper

Un contenedor con varias PÁGINAS que se deslizan de lado, como un carrusel: banners, pasos de bienvenida, galerías, fichas de productos… Cómo se arma: agrega p

Un contenedor con varias PÁGINAS que se deslizan de lado, como un carrusel: banners, pasos de bienvenida, galerías, fichas de productos… Cómo se arma: agrega páginas con «+ Agregar página» (en Estilo) y arrastra a cada una los controles que lleve. Sus hijos directos son siempre páginas; los controles van DENTRO de una página. Dirección: horizontal (como un carrusel) o vertical (como TikTok: cada página ocupa el alto del swiper; dale un alto fijo, por ejemplo 100 % de la pantalla). Evento «Al cambiar de página»: corre cada vez que llega a otra página y trae el número de página (y el elemento, si viene de una colección). Opciones: flechas y puntos para cambiar de página, Bucle (de la última vuelve a la primera) y Cambiar de página solo (cada cierto número de segundos; en el editor solo corre en Preview). En el celular se desliza con el dedo. Para llenarlo con datos (una página por elemento de un JSON) usa la función «Agregar swiper (colección)»: la primera página es la plantilla y se repite por cada elemento.

Estilo

  • Dirección
  • Flechas
  • Puntos (indicador de página)
  • Bucle (de la última vuelve a la primera)
  • Color de flechas y puntos

Data

  • Cambiar de página solo
  • Segundos entre páginas

Eventos

  • Al cargar — Cuando el componente aparece en pantalla
  • Al cambiar de página — Cuando el swiper llega a otra página (con el dedo, las flechas o solo). Trae el número de página y, si se llenó con datos, el elemento de esa página