carousel - Carrusel

Proporciona un componente de presentación de diapositivas que puede añadirse a su aplicación.

Categoría

Adaptable

Sintaxis

<xe:carousel id="id_text">content & slide nodes</xe:carousel>

Este componente permite el desplazamiento automático y/o manual por un distintas diapositivas en el Carrusel. El control da soporte a nodos de diapositivas en el Carrusel que pueden personalizarse para mostrar distintos fondos e información de texto diferente. El Carrusel proporciona botones de flecha a la izquierda y derecha para navegar manualmente por las diapositivas. También proporciona un conjunto de círculos indicadores hacia la parte inferior, uno de los cuales indica la diapositiva activa actualmente. Los círculos indicadores también pueden pulsarse para ir directamente a esa diapositiva concreta.

Tabla 1. Propiedades esenciales
Propiedad Descripción
slidenodes Permite la adición de nodos de diapositiva al Carrusel. No hay límite en cuanto a la cantidad de nodos de diapositiva que se pueden añadir al Carrusel. Cada diapositiva tiene varias propiedades que pueden establecerse que se listan en este tema.
Tabla 2. Todas las propiedades
Categoría Propiedades Descripción
elementos básicos autoCycle Booleano. Indica si el Carrusel debe ir pasando automáticamente por sus diapositivas sin intervención del usuario. El valor predeterminado es false.
  pause Serie. Indica si, cuando está habilitado autoCycle, se debe poner en pausa el desplazamiento automático cuando el puntero del ratón pasa el cursor por encima de del Carrusel. Si se establece esta propiedad en "true" o "hover" se habilita la característica, si también se ha habilitado autoCycle. Esto permite a los usuarios finales poner en pausa el desplazamiento del Carrusel, centrarse en una diapositiva concreta y tomar control de la navegación del Carrusel. El valor predeterminado es "hover".
  slideInterval Entero. Define, en milisegundos, la duración que el intervalo debería tener cuando se desplaza automáticamente entre diapositivas. Esta propiedad solamente se aplica cuando autoCycle se ha habilitado. El valor predeterminado es 5000 (5 segundos).
  wrapped Booleano. Especifica si el Carrusel se reinicia desde la última diapositiva a la primera. Cuando se habilita significa que después de llegar a la última diapositiva, el Carrusel volverá a la primera diapositiva en la siguiente solicitud de ciclo, ya sea un ciclo automático o uno manual. El valor predeterminado es true.
  heightExtraSmall Especifica la altura del Carrusel cuando se visualiza en dispositivos extra pequeños, por ejemplo, teléfonos móviles. Extra pequeño es un tamaño definido por Bootstrap y equivale a dispositivos con una anchura de pantalla inferior a 768 píxeles de ancho.
  heightSmall Especifica la altura del Carrusel cuando se visualiza en dispositivos pequeños, por ejemplo, una tableta. Pequeño es un tamaño definido por Bootstrap y equivale a una anchura de pantalla entre 768 píxeles y 992 píxeles de ancho.
  heightMedium Especifica la altura del Carrusel cuando se visualiza en dispositivos de tamaño mediano, por ejemplo, portátiles o monitores de sistemas de escritorio. Mediano es un tamaño definido por Bootstrap y equivale a una anchura de pantalla entre 992 píxeles y 1200 píxeles de ancho.
  heightLarge Especifica la altura del Carrusel cuando se visualiza en dispositivos grandes, por ejemplo, monitores grandes de alta resolución. Grande es un tamaño definido por Bootstrap y equivale a dispositivos con una anchura de pantalla superior a 1200 píxeles de ancho.
  slidenodes Permite la adición de nodos de diapositiva al Carrusel. No hay límite en cuanto a la cantidad de nodos de diapositiva que se pueden añadir al Carrusel. Cada nodo de diapositiva tiene varias propiedades que pueden establecerse, que se listan en este tema.
styling indicatorStyle Propiedad de estilo CSS. Define el estilo visual de los círculos indicadores del Carrusel.
  indicatorStyleClass Propiedad de clases de estilo CSS. Define las clases CSS asignadas a los círculos indicadores del Carrusel.
  style Propiedad de estilo CSS. Define el estilo visual del Carrusel.
  styleClass Propiedad de clases de estilo CSS. Define las clases CSS asignadas al Carrusel.

Uso

Para obtener más información sobre propiedades específicas, pulse Todas las propiedades cuando esté en Modalidad de diseño y busque la propiedad que desee bajo su respectiva categoría.

Ejemplos

Este ejemplo de código muestra un control de carrusel que tiene tres nodos de diapositivas.
<xe:carousel id="carousel1"
	autoCycle="true"
	slideInterval="3000"
	pause="true"
	wrapped="true"
	heightLarge="600px"
	heightMedium="500px"
	heightSmall="400px"
	heightExtraSmall="300px">
	<xe:this.slideNodes>
		<xe:slide headingText="Dispositiva 1" 
			captionText="Título 1"
			descriptionText="Descripción de la primera diapositiva"
			backgroundSrc="img1.jpg" 
			buttonHref="page1.xsp"
			buttonLabel="Más información">
		</xe:slide>
		<xe:slide headingText="Diapositiva 2" 
			captionText="Título 2"
			descriptionText="Descripción de la segunda diapositiva"
			backgroundSrc="img2.jpg>
		</xe:slide>
		<xe:slide headingText="Diapositiva 3"
			backgroundColor="#428BCA" 
			buttonHref="page2.xsp"
			buttonLabel="Más información">
		</xe:slide>
	</xe:this.slideNodes>
</xe:carousel>