Carousel

(part of package 'Bootstrap Extra Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

A component that displays a slideshow of images with optional captions.

This is a reference page; many components have detailed usage guides here.

Properties

cycleInterval

Interval (in milliseconds) at which the carousel automatically cycles through slides. Type: Number Default Value: 5000

---

imageCss

An array of CSS property objects to be applied to images within the carousel. Type: Array<CustomType<bootstrapextracomponents-carousel.cssProperty>>

---

imageOptions

Options for displaying images within the carousel (e.g., "Reduce", "Crop", etc.). Type: String Default Value: "Reduce"

---

lazyLoading

When true, slides are loaded lazily as needed. Type: Boolean Default Value: true

---

location

The position of the carousel component on the form. Type: Point

---

noPause

When true, the carousel does not pause cycling on user interaction. Type: Boolean Default Value: false

---

noTransition

When true, transition effects between slides are disabled. Type: Boolean Default Value: false

---

responsiveHeight

Height used for responsive layouts. Type: Number Default Value: 300

---

slides

An array of slide objects to be displayed in the carousel. Type: Array<CustomType<bootstrapextracomponents-carousel.slide>>

---

slidesFoundset

A foundset that provides slide data. Type: JSFoundset

---

styleClass

CSS style classes applied to the carousel component. Type: Styleclass

---

updateRecordSelection

When true the foundset's selection is updated with any slide selection Type: Boolean Default Value: false

---

visible

Flag indicating whether the carousel is visible. Type: Visible

---

Events

onSlideClicked(event,slide)

Fired when a slide is clicked.

Parameters:

• {JSEvent} event The event object containing details about the click event e.g. target element, mouse coordinates

• {CustomType<bootstrapextracomponents-carousel.slide>} slide The slide object that was clicked

---

API

addSlide(slideToAdd)

Adds the given slide

Parameters:

• {CustomType<bootstrapextracomponents-carousel.slide>} slideToAdd The slide object to be added to the collection.

---

getSelectedIndex()

Returns the index of the currently selected slide (0 based)

Returns: Number Index The 0-based index of the currently selected slide.

---

removeSlide(index)

Removes the slide at the given index (0 based)

Parameters:

• {Number} index The 0-based index of the slide to be removed or set as selected.

---

setSelectedIndex(index)

Sets the selected slide to the given index (0 based)

Parameters:

• {Number} index The 0-based index of the slide to be removed or set as selected.

---

setSlides(slides)

Sets the given slides

Parameters:

• {Array<CustomType<bootstrapextracomponents-carousel.slide>>} slides An array of slide objects to set as the current collection of slides.

---

Types

cssProperty

Represents a CSS property used to style carousel images. scripting type: CustomType<bootstrapextracomponents-carousel.cssProperty>

• propertyName

  • The name of the CSS property.

  • Type: string

• propertyValue

  • The value assigned to the CSS property.

  • Type: string

slide

Represents a slide in the carousel. scripting type: CustomType<bootstrapextracomponents-carousel.slide>

• caption

  • The caption text displayed with this slide.

  • Type: tagstring
• imageUrl

  • The URL of the image for this slide.

  • Type: string

---