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

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

9 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:

1 Like

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.

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

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

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

1 Like

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.

Tengo una cosulta, como puedo hacer para crear un texto parpadeante como el de tu gif al principio?? Eso se ve genial.

Estuve intentando con un set interval pero no se como hacerlo para que se siga repitiendo.

Qué tal Jose. Es un gif, podrías intentar con un maker como: https://giphy.com/create/gifmaker

Jajaja de veras! Es que bueno lo hice con la función set Interval y funciona medio raro. Bueno pero gracias

que buen tutorial. gracias por el tiempo que te tomaste haciéndolo. lo logre realizar. gracias!!!

1 Like

Saludos @brendsliliana quisiera saber cuanto me costaría uqe me ayudes hacer este requerimiento en mi aplicación.

Yo no veo nada , seguí los pasos y al final no se ve nada en mi app

revisa este video te puede funcionar

Hola @brendsliliana disculpa y para poder “replicar” la pantalla de “menú” que se tiene de inicio en esta app?
Que muestra categorías con pequeños productos hay algún ejemplo o algo para poder replicarla?

Hola @Gerardo_Barria, lo puedes hacer de la siguiente manera:

https://video.drift.com/v/abOSZtRsdKl/

Cordial saludo @Josue_Abrego_Soriano , estoy intentando subir un archivo gif
desde la plataforma https://giphy.com/ y cuando lo subo a apphive no me permite ver el archivo, carga pero al final no se muestra el gif como si no fuese compatible

De antemano agradezco la atención prestada.