AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Ayuda / Desarrollar una aplicación o un sitio web / Controles, ventanas y páginas / Controles: tipos disponibles / Control Banner deslizante
  • Presentación del control Banner deslizante
  • Crear un control Banner Deslizante
  • Características del control Banner deslizante
  • Ventana de descripción
  • Contenido de los planos del control Banner deslizante
  • Personalizar el control Banner deslizante
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Otros
Procedimientos almacenados
Presentación del control Banner deslizante
El control Banner deslizante permite mostrar sucesivamente varios contenidos, ya sea de forma automática o tras una acción del usuario.
No se trata de un control Imagen con deslizamiento automático, ni de un Looper lineal. El control Banner deslizante puede contener controles y procesos.
Este control también permite mostrar contenidos independientes en diferentes diapositivas.
Los Banners deslizantes se utilizan a menudo como encabezados de un sitio.
Ejemplo:
Las diapositivas de un Banner deslizante cambian automáticamente o cuando un usuario lo solicita.Las diapositivas pueden contener controles
Las diapositivas de un Banner deslizante cambian automáticamente o cuando un usuario lo solicita. Las diapositivas pueden contener controles.
Crear un control Banner Deslizante
Para crear un control Banner deslizante:
  1. En la pestaña "Creación", en el grupo "Contenedores", haga clic en "Banner deslizante".
  2. Haga clic en la ubicación en la que desea crear el control. El control aparece en el editor.
  3. El control Banner deslizante está constituido por:
    • varios planos con los diferentes elementos del Banner deslizante. Cada plano contiene los controles necesarios para una "diapositiva" del Banner deslizante.
    • Puntos de navegación (o viñetas), que se muestran en la parte inferior del Banner deslizante, y que permiten al usuario acceder directamente a una diapositiva.
    • botones de navegación, que permiten al usuario deslizar las "diapositivas" del Banner deslizante.
De forma predeterminada, al crear el control, este contiene 3 planos. El primer plano se muestra en el editor. Puede crear directamente los controles que se mostrarán en los diferentes planos.
Observación: Para acceder a los diferentes planos en el editor, es necesario:
  • seleccionar el control Banner deslizante.
  • utilizar las teclas Re Pág/Av Pág para cambiar de plano.
Para ver las características del control, seleccione la opción "Descripción" en el menú contextual.
Observación: El control Banner deslizante es WYSIWYG en el editor:
  • Si hace clic en el botón izquierdo y derecho del editor, se mostrarán los planos correspondientes.
  • Si hace clic en los puntos de navegación (o viñetas) en el editor, se mostrarán los planos correspondientes.
Características del control Banner deslizante

Ventana de descripción

La ventana de descripción del control "Banner deslizante" permite:
  • Crear o eliminar los planos que corresponden a las diferentes "diapositivas" del Banner deslizante (pestaña "General"). De forma predeterminada, hay tres planos disponibles.
    Observación: Para acceder a los diferentes planos en el editor, es necesario:
    • seleccionar el control Banner deslizante.
    • utilizar las teclas Re Pág/Av Pág para cambiar de plano.
  • Definir las propiedades específicas de un plano (pestaña "General"): Seleccione el plano que desea para definir:
    • si se muestra el plano de forma predeterminada.
    • las opciones de estilo del control.
    • el tooltip del plano.
  • Definir las opciones de funcionamiento del control Banner deslizante (pestaña "Detalles"): Las opciones son las siguientes:
    • Definir la manera en la que el usuario deslizará las diapositivas. Los modos disponibles son:
      • con el teclado: el usuario puede hacer clic en los botones de flecha para deslizar las diapositivas.
      • deslizando horizontalmente: el usuario debe deslizar las diapositivas con el ratón.
      • con desplazamiento táctil: el usuario debe realizar un deslizamiento táctil para cambiar las diapositivas.
      • con puntos de navegación: el usuario debe hacer clic en los puntos de navegación para deslizar las diapositivas. Si esta opción no está seleccionada, los puntos de navegación no se muestran en el Banner deslizante.
      • con un botón atrás: el usuario debe hacer clic en el botón "anterior" del Banner deslizante para deslizar las diapositivas. Si esta opción no está seleccionada, el botón "anterior" no se muestra en el Banner deslizante.
      • con un botón adelante: el usuario debe que hacer clic en el botón "siguiente" del Banner deslizante deslizar las diapositivas. Si esta opción no está seleccionada, el botón "siguiente" no se muestra en el Banner deslizante.
    • Activar clic en el fondo del banner. Permite activar el clic en el fondo del Banner deslizante. Si esta opción está seleccionada, el evento "Clic" se agrega automáticamente a los eventos del control Banner deslizante.
    • Iniciar secuencia automáticamente: Activa el deslizamiento automático. En este caso, todos los planos visibles se muestran automáticamente según el orden de los mismos, durante el tiempo especificado.
    • Detener deslizamiento al pasar el cursor: Detiene el deslizamiento de los planos cuando se desliza el cursor sobre el plano actual.
    • Duración de cada plano: Duración de cada "diapositiva" del Banner deslizante.
  • Definir el estilo del control Banner deslizante (pestaña "Estilo"): Es posible definir:
    • las opciones CSS del control.
    • los puntos de navegación (viñetas):
      • Estilo CSS, si es necesario.
      • Conjunto de imágenes. El conjunto de imágenes utilizado debe ser compatible con el conjunto de imágenes de los controles Botón de opción y Casilla de verificación. Este conjunto de imágenes también puede contener una animación para los puntos de navegación.
      • Margen inferior: distancia de los puntos de navegación con respecto al borde inferior del control Banner deslizante.
      • Espacio entre cada elemento: espacio entre los puntos de navegación.
      • Ancho y alto de los elementos.
    • el botón de la izquierda:
      • Estilo CSS, si es necesario.
      • Conjunto de imágenes. El conjunto de imágenes utilizado debe ser compatible con el conjunto de imágenes de los controles Botón. Este conjunto de imágenes también puede contener una animación.
      • Desplazamiento a la izquierda: distancia entre el botón y el borde izquierdo del control.
      • Ancho y alto del botón.
    • el botón de la derecha:
      • Estilo CSS, si es necesario.
      • Conjunto de imágenes. El conjunto de imágenes utilizado debe ser compatible con el conjunto de imágenes de los controles Botón. Este conjunto de imágenes también puede contener una animación.
      • Desplazamiento a la derecha: distancia entre el botón y el borde derecho del control.
      • Ancho y alto del botón.

Contenido de los planos del control Banner deslizante

  • Los planos asociados al control Banner deslizante pueden contener todos los tipos de controles que existen en WEBDEV, excepto otro control Banner deslizante.
  • El control de un plano se puede asociar a varios planos del Banner deslizante. En este caso, el control se superpone automáticamente.

Personalizar el control Banner deslizante

De forma predeterminada, el control Banner deslizante contiene botones y puntos de navegación para deslizar los planos. Estos elementos se pueden personalizar en el estilo del control.
Si no desea utilizar los controles propuestos de forma predeterminada, puede utilizar controles específicos ubicados fuera del control Banner deslizante. Para ello, es necesario:
  • configurar el control Banner deslizante para no utilizar los controles predeterminados (pestaña "Detalles" de la descripción del control).
  • programar la acción de los nuevos controles con las funciones de gestión de deslizamiento. Para obtener más información, consulte Personalizar el deslizamiento de diapositivas.
Versión mínima requerida
  • Versión 22
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 22/06/2023

Señalar un error o enviar una sugerencia | Ayuda local