• Inicio
  • Documentación
  • Cursos
  • Blog
  • FAQs
  • Inicio
  • Documentación
  • Cursos
  • Blog
  • FAQs
inicio/Preguntas/UI / UX/¿Cómo hacer un slider automático de promociones?
Búsquedas populares:¿Cómo agrego el Google API key?, Declaración de permisos de ubicación

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

404 vistas 0 21 diciembre, 2020 Updated on 22 December, 2020 jonatan

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 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! :warning: En Record id: deberás ordenar tus banners de 0 (El primero) 1, 2, 3, etc.

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

Relacionado

¿Esto te ayudó?

Si  1 No
Artículos similares
  • Tamaño de los pointer en un mapa
  • Como cambiar de color un elemento de la lista al seleccionarlo o des-seleccionarlo
  • Como reciclar una pantalla de estado de pedidos
  • Estructura básica de un “Menu tabs”
  • ¿Cómo cambiar el color de mi App? y qué paleta de color elegir
  • Cambiar el ICONO de mi App: Medidas y recomendaciones

Didn't find your answer? Contact Us

Leave A Comment Cancelar respuesta

Artículos populares
  • Paso a paso para publicar tu App en Play Store
  • Paso a paso para publicar tu App en App Store
  • Declaración de permisos de ubicación en segundo plano en Google Play (geolocation tracking)
  • ¿Cómo agrego el Google API key?
  • Pasos para publicar tu app en App Store
Categorías
  • Información
  • Plantillas
  • APK
  • Funciones
  • UI / UX
  • Controles
  • Precios
  • Integraciones
  • Tiendas
UI / UX
  • ¿Cómo hacer un slider automático de promociones?
  • Tamaño de los pointer en un mapa
  • Como cambiar de color un elemento de la lista al seleccionarlo o des-seleccionarlo
  • Como reciclar una pantalla de estado de pedidos
  • Estructura básica de un “Menu tabs”
  • ¿Cómo cambiar el color de mi App? y qué paleta de color elegir
Ver todos 24  

  Como hacer una barra de progreso

¿Cómo hacer un loading personalizado?  

© 2020 Apphive Inc. Derechos reservados.
Búsquedas populares:¿Cómo agrego el Google API key?, Declaración de permisos de ubicación