¿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

:eye: 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)

Regresamos a un OnLoad > Setpage value

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 posicion)

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 posicion

Is True: Set page value > Key > Contador banner

En value: 0

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

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

4 Likes

Nuevamente muy agradecido contigo :smiley:, excelente tutorial y muchas gracias por tomarte el tiempo para aportarnos esto, un gran trabajo de tu parte @brendsliliana :clap:t4:

Bendiciones! :blush:

Hola nuevamente @brendsliliana , me puse a hacerlo, y no me cambia las imágenes, pero creo que es por el “Modify control” que dice Modifica posición, lo que contiene ese Modify no lo encuentro en ninguna ScreenShot

1 Like

Hola @brendsliliana como dice el comentario anterior de Josue, falta ese Modify Control antes de la Arithmetic Operation, sería lo único faltante, de resto todo bien. Gracias por el aporte.

Gracias Brenda,
funciona de lo mejor.

1 Like

Y cuando la App este compilada y funcionando como el dueño del negocio podra agregar esas promociones?

Yo necesito hacer ese Slider pero que cuando el cliente al menu del negocio vea las promociones que tiene ese negocio.

No se colocó así por un tema de seguridad y validar qué se está subiendo. En caso de que gustes que sea así se tendría que hacer una función de consulta de la base.

:eye: No recomiendo esta práctica, pero sí deseas hacerlo de este modo podría programar el tutorial y con gusto compartirlo.

Hola!,

Aca te dejo como debes tener el modifyControl

modifycontrolchangepositionswiper

Espero que te funcione, porque a mi si me funciono colocando ese modifycontrol.

Saludos,
Leonardo

Listo, ya quedó actualizado gracias por la observación.

1 Like

Así es muchas gracias… Este fue el modify que me falto, una disculpa… En un momento más ajusto el tutorial.