¿Cómo hacer un slider automático de promociones?

En este tutorial aprenderás a realizar un slider automático con imagenes de promoción como el siguiente ejemplo:

Diseño de interfaz:

Colocar un contenedor 100% de ancho y en este caso mi slider será del 25% de la pantalla.

Vamos a agregar el elemento Swiper dentro del contenedor

Y dentro del Swiper una imagen con el ancho y alto que sea de tu interés, en este caso lo hará full (100%x100%) y no olvides activar la opción “Contain” para que la imagen se adapte al contenedor.

Función:

Nos vamos a ir a la base de datos para crear la colección de “Promociones”

Agrega la colección “Ofertas” y dentro los campos “Negocio id” y “Oferta principal”

En tu pantalla agregarás en Context data > Contador banner

Agregamos en un OnLoad > Get database data

Y seguido de esto vamos a activar Is real time

Desde el botón azul “Open database browser”

Y elegimos la Colección creada previamente (Ofertas)

Vamos a Callbacks > Data obtained

Modify control

Data to send > Get database data + 0.Oferta principal

Elige el elemento imagen (banner1)

Y la propiedad a cambiar es: src

 Vamos a repetir este paso la cantidad de banners que quieras sustituir, eligiendo el elemento el número de banner (banner2, banner3, etc) y cambiando el Data to send por 1.Oferta principal o 2.Oferta principal, etc.

Vamos a agregar desde DATA el context data de: Negocio 1, Negocio 2, Negocio 3 (Recuerda que en este tutorial son 3 sliders)

En el Callback > Data obtained agregamos un Setpage value > Key y vamos a elegir Negocio 1

Y en PreviusOutputs > agregamos el valor 0.Negocio id

En este caso que son 3 sliders, vamos a seguir la siguiente estructura, eligiendo por cada Set Page Value el Key > Negocio 2 > Value > 1.Negocio id

Regresaremos al OnLoad y agregaremos un nuevo Set Page Value > Contador banner > Value = 0

En el mismo Onload vamos a agregar un Set interval > 5

En los Callbacks > On done > Modify control > Data to send > Context type

En element elegimos el elemento swiper

Y la propiedad a editar es: currentIndex

En los Callbacks > On done > Arithmetic operation

Agregamos en Operating A un Context Data > Page data > Contador banner

Operating B: 1 y Arithmetic operator +

Agregamos un Conditional

Value A: PreviusOutputs > Llamamos la operación anterior (Calcular siguiente posición)

Value B: 3 y en Logic comparation >

En los callbacks Is false > Set page value

En KEY > Contador banner

Y en Value > Arithmetic operation > Calcular siguiente posición

Is True: Set page value > Key > Contador banner

En value: 0

¡Muy importante!  En Record id: deberás ordenar tus banners de 0 (El primero) 1, 2, 3, etc.

 No olvides agregar las imágenes desde la base, el tamaño recomendado es: An:550 x Al:250px

Salir de la versión móvil