slideNodes - Slide Nodes

Provides a slide node 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.

Category

basics

Syntax

<xe:this.slideNodes>properties and content</xe:this.slideNodes>
Table 1. Properties for xe:this.slideNodes
Property Description
<xe:slide attributes></xe:slide> Child slide of the slide node with content the same as <xe:this.slideNodes>.
backgroundSrc="source_filename" Specifies the location of the image to be used as the background for this slide node.
backgroundColor="color_number" Specifies the background color to use for this slide node. This will be hidden behind the background image if a backgroundSrc property has been set.
headingText="heading_text" Displays the text of the main large heading of this slide node. The heading is an optional element of the slide node. Leaving this property empty will mean no heading is rendered.
headingTag="heading_text" Specifies the HTML tag to be used to display the heading (for example, 'h1', 'h2', 'h3', 'div'. The default value is 'h1'.
headingStyle="css_property" Specifies a CSS style property to define the visual style of the heading of the slide node.
headingStyleClass="css_class_property" Specifies a CSS style class(es) property to define the CSS class(es) assigned to the heading of the slide node.
captionText="caption_text" Specifies the text of the secondary caption of this slide node. The caption is an optional element of the slide node. Leaving this property empty will mean no caption is rendered.
captionStyle="css_property" Specifies a CSS style property to define the visual style of the caption of the slide node.
captionStyleClass="css_class_property" Specifies a CSS style class(es) property to define the CSS class(es) assigned to the caption of the slide node.
descriptionText="desc_text" Displays the text of the description contained on this slide node. The description is an optional element of the slide node. Leaving this property empty will mean no description is displayed.
descriptionStyle="css_property" Specifies a CSS style property to define the visual style of the description of the slide node.
descriptionStyleClass="css_class_property" Specifies a CSS style class(es) property to define the CSS class(es) assigned to the description of the slide node.
buttonHref="link_URL" Specifies a link URL that will be added to the slide node as a button link. The button link is an optional element of the slide node. Leaving this property empty will mean no button is displayed.
buttonLabel="label_text" Specifies the label text to apply to the button link on the slide node.
buttonStyle="css_property" Specifies a CSS style property to define the visual style of the button link on the slide node.
buttonStyleClass="css_class_property" Specifies a CSS style class(es) property to define the CSS class(es) assigned to the button link on the slide node.

Usage

In Design mode, click All Properties and look for slideNodes under basics.

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>