carousel - Carousel
Provides a slideshow component that can be added to your application.
Category
ResponsiveSyntax
<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.
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. |
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>