En este tutorial aprenderás a realizar un slider automático con imagenes de promoción como el siguiente ejemplo:
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/1/126ebfe0ccf9aa7b43997ac0f486ddb4ee74de63.gif?w=700&ssl=1)
Diseño de interfaz:
Colocar un contenedor 100% de ancho y en este caso mi slider será del 25% de la pantalla.
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/0/01321d3c6c904d11ff5e6dbbe614cc75d5778501.png?w=700&ssl=1)
Vamos a agregar el elemento Swiper dentro del contenedor
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/8/88db1a57d69f920467a5378de71a427dec5f19c7.png?w=700&ssl=1)
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.
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/7/72abb26065954bb1a746da47f9654aad263ec894.png?w=700&ssl=1)
Función:
Nos vamos a ir a la base de datos para crear la colección de “Promociones”
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/6/6a4c6627ca7cbb5e44fa68fbd4903b2a316f1a4f.png?w=700&ssl=1)
Agrega la colección “Ofertas” y dentro los campos “Negocio id” y “Oferta principal”
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/b/bf56527d11951da5c90c74fa04f71739c2256a1e.png?w=700&ssl=1)
En tu pantalla agregarás en Context data > Contador banner
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/1/1484febb8931b3fb74a3d786cc4dfb72fc5f4ebd.png?w=700&ssl=1)
Agregamos en un OnLoad > Get database data
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/d/daade87336b212410d73bb88fe3a64f8c32afeab.png?w=700&ssl=1)
Y seguido de esto vamos a activar Is real time
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/0/0aba37e0433ff891accb35b1912292f51915559f.png?w=700&ssl=1)
Desde el botón azul “Open database browser”
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/6/6a76ee8fb20baba8c63f2347551a73e035db9ca5.png?w=700&ssl=1)
Y elegimos la Colección creada previamente (Ofertas)
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/0/0c0f99019b1fd9156a56725bc7f3fcee251c46b2.png?w=700&ssl=1)
Vamos a Callbacks > Data obtained
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/4/4117381d9c08901cec7ec06946d9e105c8ad3688.png?w=700&ssl=1)
Modify control
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/3/3ae43dab600c663113b1333ac5fe23bd992b1f8b.png?w=700&ssl=1)
Data to send > Get database data + 0.Oferta principal
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/9/924b87de327ccb3ccbddd9322f4acb5e00c7354d.png?w=700&ssl=1)
Elige el elemento imagen (banner1)
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/d/db7a285dcb1b38020a57a1b34acb5f62680c6c45.png?w=700&ssl=1)
Y la propiedad a cambiar es: src
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/a/ab18033cd3538940aa377931303a545cacd2fe7b.png?w=700&ssl=1)
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.
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/a/a8d3beebc9e90599a248061aa54bff3a9f446562.png?w=700&ssl=1)
Vamos a agregar desde DATA el context data de: Negocio 1, Negocio 2, Negocio 3 (Recuerda que en este tutorial son 3 sliders)
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/b/bc1a0de8a08598c70cde7152d01f72dba6716ab7.png?w=700&ssl=1)
En el Callback > Data obtained agregamos un Setpage value > Key y vamos a elegir Negocio 1
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/5/54d29ff2161d81c931f8974eb4561bca56c58a3d.png?w=700&ssl=1)
Y en PreviusOutputs > agregamos el valor 0.Negocio id
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/5/5e2082c566111750efa7d66a6cc1dd4a7d55fecf.png?w=700&ssl=1)
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
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/b/b5295857e0ea457f5c5c560c80f5d930f74ec4f6.png?w=700&ssl=1)
Regresaremos al OnLoad y agregaremos un nuevo Set Page Value > Contador banner > Value = 0
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/5/533345aa8a2bc1558e00caf4748f6baf2bce8e89.png?w=700&ssl=1)
En el mismo Onload vamos a agregar un Set interval > 5
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/8/8b0c586fa80049e2eef395368b7b32c12a04628d.png?w=700&ssl=1)
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/d/d717365b173ef087eb9aaf45ba8aedeb631fd15a.png?w=700&ssl=1)
En los Callbacks > On done > Modify control > Data to send > Context type
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/f/f06d08bc9729de5521abc3532231b53fa6f443c4.png?w=700&ssl=1)
En element elegimos el elemento swiper
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/8/87f09b2c9b9317c698eb16de0c74a0ee55106326.png?w=700&ssl=1)
Y la propiedad a editar es: currentIndex
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/3/36f9e27187af52a941df1c0b5b87c9042500eef0.png?w=700&ssl=1)
En los Callbacks > On done > Arithmetic operation
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/a/a3c09d36e930ff8871a2ea5301820af301ddc27d.png?w=700&ssl=1)
Agregamos en Operating A un Context Data > Page data > Contador banner
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/2/24d83849affdc7af306692ed741ede68d292f65a.png?w=700&ssl=1)
Operating B: 1 y Arithmetic operator +
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/d/db6f4f03823cf4d1a64a297e6c43d5dad571d21c.png?w=700&ssl=1)
Agregamos un Conditional
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/7/7da8763136a8825ee519aba2b12dc40609e50fdc.png?w=700&ssl=1)
Value A: PreviusOutputs > Llamamos la operación anterior (Calcular siguiente posición)
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/2/2654904ef42112ebad14fd745132ed4eb7a46458.png?w=700&ssl=1)
Value B: 3 y en Logic comparation >
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/3/350f85c0fbf17208b40c54bedd891a1fe4458f67.png?w=700&ssl=1)
En los callbacks Is false > Set page value
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/8/804cce4e87814dae2415817e08338e574aea2884.png?w=700&ssl=1)
En KEY > Contador banner
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/2/24c604d4d79954d1db5d17c1343361024cb96af7.png?w=700&ssl=1)
Y en Value > Arithmetic operation > Calcular siguiente posición
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/8/8c6aa7c6abfc2dceef2ee1c7ad37cfa3d77b046c.png?w=700&ssl=1)
Is True: Set page value > Key > Contador banner
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/3/3013bed628950f87791eaf7f5d185f409312882c.png?w=700&ssl=1)
En value: 0
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/3/36b5e8de20f824df5294a44c9d114b90389b9139.png?w=700&ssl=1)
¡Muy importante! En Record id: deberás ordenar tus banners de 0 (El primero) 1, 2, 3, etc.
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/e/ec496ed2048ce9e91e9d5f45b5734e79bc7d6cc5.png?w=700&ssl=1)
No olvides agregar las imágenes desde la base, el tamaño recomendado es: An:550 x Al:250px
![](https://i0.wp.com/comunidad.apphive.io/uploads/default/original/2X/6/6e970f7f9154df22bebe9f793041b3375eb50dd0.png?w=700&ssl=1)