carousel - Carousel

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

Category

Responsive

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>