Carousel
The Carousel component offers a simple carousel to show several images in a slide show
Table of contents
The component has the following properties:
| Property | Type | Default | Description |
|---|---|---|---|
| cycleInterval | Number | 5000 | Number of milliseconds between transitions; when <= 0, slides will not auto-cylce |
| imageCss | cssProperty[] | null | css properties for the images; if set, the imageOptions property is ignored |
| imageOptions | String | Reduce | Attempts to size images of different sizes to either "Reduce" (images are only reduced when larger), "Reduce/Enlarge" (images are resized to fit the component), "Scale to fit" (images are proportionally resized to fit the component) and "Crop" (images are cut off when larger) |
| lazyLoading | Boolean | true | When true, images are only loaded when needed |
| noPause | Boolean | false | When true, the animation does not stop when the mouse is over the component |
| noTransition | Boolean | false | Whether to disable the transition animation between slides |
| slides | slide[] | null | Array of slides to show |
| slidesFoundset | JSFoundSet | null | Foundset to load images from; the "image" dataprovider provides the image, the "caption" dataprovider provides the caption text shown |
| styleClass | Boolean | true | Additional style classe(s) of the component |
| visible | Boolean | true | The visible property of the component, default true. |
Slide is a component specific javascript type with the following properties:
| Property | Type | Default | Description |
|---|---|---|---|
| imageUrl | String | null | The url to load the image from |
| caption | String | null | The caption text of the image |
cssProperty is a component specific javascript type with the following properties:
| Property | Type | Default | Description |
|---|---|---|---|
| propertyName | String | null | The name of the css property to set (e.g. 'width') |
| propertyValue | String | null | The value of the property (e.g. '100%') |
The carousel currently has no events
| Method | Params | Return | Description |
|---|---|---|---|
| addSlide | slideToAdd:slide | Adds the given slide at the end of the list of slides. | |
| removeSlide | index:Number | Removes the slide at the given index (0 based). | |
| getSelectedIndex | Number | Gets the index of the currently selected slide (0 based). | |
| setSelectedIndex | index:Number | Animates to the slide with the given index (0 based). | |
| setSlides | slides:slide[] | Sets all slides to be shown. |
Adds a slide at the end of the list of slides
Params
| Type | Name | Description | Required |
|---|---|---|---|
| slide | slide | The slide to add | Required |
Returns void
Removes the slide at the given index (0 based)
Params
| Type | Name | Description | Required |
|---|---|---|---|
| Number | index | The index at which to remove a slide | Required |
Returns void
Gets the index of the currently selected slide (0 based)
Params none
Returns Number slideIndex
Animates to the slide with the given index (0 based).
Params
| Type | Name | Description | Required |
|---|---|---|---|
| Number | index | The index of the slide to select | Required |
Returns void
Sets all slides to be shown in the carousel.
Params
| Type | Name | Description | Required |
|---|---|---|---|
| slide[] | slides | The slides to set | Required |
Returns void