OwlCarousel

Page not available in English



Descripción del Control

Control que permite crear un carrusel responsivo. Basado en el plugin de Jquery OwlCarousel. Cuenta con  varios tipos de template con diseños ya elaborados (Product List, Brand List, Slide, Video List).  

Compatibilidad

Web

Usando el control

Abrir Extensibility Catalog y dirigirse a la sección Web a través del menú lateral izquierdo.

Seleccionar el control OwlCarousel y luego instalar. (Ver documentación del Extensibility Catalog si tiene dudas en el proceso de instalación de controles).

Durante el proceso de instalación se recomienda importar el Xpz de ejemplo que viene con el control.

Al importar el Xpz de ejemplo del User Control en la ruta Ignia/Controls/Owl se crea un Web Panel  de ejemplo y los SDT con las estructura de datos para cada tipo de template de carrusel.

Estructura de datos

El control cuenta con varios tipos de Template y para cada uno de ellos se define una estructura de datos mediante la cual se le asignan los valores a mostrar:

Estructura de datos para un carrusel de tipo Product List:

 

Estructura de datos para un carrusel de tipo Brand List:

Estructura de datos para un carrusel de tipo Slide:

Estructura de datos para un carrusel de tipo Video List:

Propiedades

  • Header: Texto a mostrar en el encabezado.
  • Center: Centrar un elemento.
  • Class: Clase de asociada al carrusel, para ver las personalizaciones que se puede realizar ir a la sección Configuración de Estilos.
  • Animate Out: Clase para la animación de salida. Las animaciones disponibles son todas las que se encuentran en la librería Animate.css.
  • Animate In: Clase para la animación de entrada. Las animaciones disponibles son todas las que se encuentran en la librería Animate.css.
  • Items: El número de elementos que desea ver en la pantalla.
  • Loop: Bucle infinito. Duplicar los últimos y primeros elementos para obtener una ilusión de bucle.
  • Mouse Drag: Mover los elementos del carrusel al arrastrar el mouse.
  • Pull Drag: Mover elementos del carrusel hacia el principio al arrastrar el mouse.
  • Rewind: Ir al primer elemento cuando se llegue al último.
  • Slide By: Cantidad de elementos a desplazarse al utilizar la navegación.
  • Start Position: Posición del elemento inicial. Válido para cuando la propiedad Items sea igual a 1. La posición del primer elemento es 0.  
  • Touch Drag:  Habilitar el movimiento de los elementos del carrusel al tocar la pantalla. Para dispositivos móviles y pantallas táctiles.
  • Nav: Mostrar los botones de paginado (anterior / siguiente ).
  • Nav Text Next: Texto para el botón de siguiente.
  • Nav Text Prev: Texto para el botón de anterior.
  • Nav Speed: Velocidad de navegación.
  • Dots: Mostrar la paginación por puntos.
  • Dots Each: Mostrar puntos cada x elementos.
  • Dots Speed: Velocidad de la paginación.
  • Autoplay: Habilitar la reproducción automática del carrusel.
  • Autoplay Timeout: Intervalo de tiempo para el cambio de los elementos.
  • Autoplay Hover Pause: Pausar la reproducción al hacer hover con el mouse.
  • Autoplay Speed:  Velocidad de la reproducción automática.
  • Template: Tipo de diseño para el carrusel a mostrar.
  • Data: SDT con los datos a mostrar en el carrusel, el tipo de SDT depende del Template seleccionado.
  • Responsive: Habilitar el comportamiento responsivo del carrusel.
  • Item Extra Small: Cantidad de elementos a mostrar por página en el carrusel en una resolución menor a 768 px.
  • Item Small: Cantidad de elementos a mostrar por página en el carrusel en una resolución mayor o igual a 768px y menor a 992 px.
  • Item Medium: Cantidad de elementos a mostrar por página en el carrusel en una resolución mayor o igual a 992px y menor a 1024 px.
  • Item Large: Cantidad de elementos a mostrar por página en el carrusel en una resolución mayor o igual a 1024px.

Configuración de Estilos

Para configurar los estilos del control en los temas de GeneXus encontramos un nuevo tipo de clase de nombre OwlCarousel.

Este tipo de clase puede ser asignada al control mediante la propiedad Class.

La clase OwlCarousel cuenta con las siguientes propiedades:

  • Header Class:  Clase utilizada para el "Header" de Carousel. (Tipo de clase: TextBlock).
  • Container Class: Clase utilizada para el contenedor de Carrusel. (Tipo de Clase: Section).
  • Item Container Class: Clase utilizada para el contenedor de los elementos del carrusel. (Tipo de Clase: Section).
  • Dots
    • Dots Class: Clase utilizada para el estilo del contenedor de los puntos del paginado. (Tipo de Clase: Section).
    • Dot Class: Clase utilizada para el estilo de los puntos del paginado. (Tipo de Clase: Section).
    • Dot Active Class: Clase utilizada para el estilo del punto activo. (Tipo de Clase: Section).
  • Nav
    • Nav Class: Clase utilizada para el estilo de los botones del paginado. (Tipo de Clase: Section).
    • Nav Prev Class: Clase utilizada para el estilo del botón anterior del paginado. (Tipo de Clase: Section).
    • Nav Next Class: Clase utilizada para el estilo del botón siguiente del paginado. (Tipo de Clase: Section).
  • Template Product List
    • Product Name Class: Clase utilizada para diseñar el texto "Nombre del producto". (Tipo de clase: Section).
    • Price Class: Clase utilizada para diseñar el valor "Precio". (Tipo de Clase: Section).
    • Add Cart Button Class: Clase utilizada para diseñar el botón "Añadir al carrito". (Tipo de clase: Button).
    • Zoom Button Class: Clase utilizada para diseñar el botón "Zoom". (Tipo de clase: Button).
    • View Button Class: Clase utilizada para diseñar el botón "Ver". (Tipo de clase: Button).
  • Template Video List
    • Video Wrapper: Clase utilizada para diseñar el contenedor del Video. (Tipo de Clase: Section)

Ejecución

Template Product List

Template Brand List

Template Slide

Template Video List