carousel - Carousel

Provides a slideshow component that can be added to your application.

Syntax

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

This component allows automatic and/or manual cycling through a number of slides in the Carousel. The control supports slide nodes in the Carousel that can be customized to display different backgrounds and different textual information. The Carousel provides arrow buttons on the left and right to manually navigate through the slides. It also provides a set of indicator circles towards the bottom, one of which indicates the currently active slide. The indicator circles can also be clicked to jump directly to that particular slide.

Table 1. Essential properties
Property	Description
slidenodes	Allows the addition of slide nodes to the Carousel. There is no limit to how many slide nodes can be added to the Carousel. Each slide has a number of properties that can be set which are listed in this topic.

Table 2. All properties
Category	Properties	Description
basics	autoCycle	Boolean. Indicates if the Carousel should automatically cycle through its slides without user intervention. The default value is false.
	pause	String. Indicates if, when autoCycle is enabled, the automatic cycling should pause when the mouse pointer is hovering over the Carousel. Setting this property to "true" or "hover" enables the feature, if autoCycle has also been enabled. This allows end users to pause the Carousel's cycling, focus on a particular slide and take control of the Carousel navigation. The default value is "hover".
	slideInterval	Integer. Defines, in milliseconds, how long the interval should be when automatically cycling between slides. This property is only applied when autoCycle has been enabled. The default value is 5000 (5 seconds).
	wrapped	Boolean. Specifies if the Carousel wraps from the last slide back to the first. When enabled this means that after reaching the last slide, the Carousel will return to the first slide on the next cycle request, whether that be an automatic cycle or a manual one. Default value is true.
	heightExtraSmall	Specifies the height of the Carousel when displayed on extra small devices, e.g. mobile phones. Extra small is a size defined by Bootstrap, and equates to devices with a screen width less than 768 pixels wide.
	heightSmall	Specifies the height of the Carousel when displayed on small devices, e.g. tablet. Small is a size defined by Bootstrap, and equates to devices with a screen width between 768 pixels and 992 pixels wide.
	heightMedium	Specifies the height of the Carousel when displayed on medium sized devices, e.g. laptops or desktop monitors. Medium is a size defined by Bootstrap, and equates to devices with a screen width between 992 pixels and 1200 pixels wide.
	heightLarge	Specifies the height of the Carousel when displayed on large devices, e.g. large high-resolution monitors. Large is a size defined by Bootstrap, and equates to devices with a screen width more than 1200 pixels wide.
	slidenodes	Allows the addition of slide nodes to the Carousel. There is no limit to how many slide nodes can be added to the Carousel. Each slide node has a number of properties that can be set, which are listed in this topic.
styling	indicatorStyle	CSS style property. Defines the visual style of the indicator circles on the Carousel.
	indicatorStyleClass	CSS style classes property. Defines the CSS class(es) assigned to the indicator circles on the Carousel.
	style	CSS style property. Defines the visual style of the Carousel.
	styleClass	CSS style classes property. Defines the CSS class(es) assigned to the Carousel.

Usage

To find out more information about specific properties, click All Properties when in Design Mode and look for your desired property under its respective category.

Examples

This code example shows a carousel control that has three slide nodes.

<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="Slide 1" 
			captionText="Caption 1"
			descriptionText="Description for the first slide"
			backgroundSrc="img1.jpg" 
			buttonHref="page1.xsp"
			buttonLabel="Learn More">
		</xe:slide>
		<xe:slide headingText="Slide 2" 
			captionText="Caption 2"
			descriptionText="Description for the second slide"
			backgroundSrc="img2.jpg>
		</xe:slide>
		<xe:slide headingText="Slide 3"
			backgroundColor="#428BCA" 
			buttonHref="page2.xsp"
			buttonLabel="Learn More">
		</xe:slide>
	</xe:this.slideNodes>
</xe:carousel>

carousel - Carousel

Category

Syntax

Usage

Examples