Carousel

Note:  This feature is currently in beta. There could be changes to its design, behavior, and functionality in upcoming releases.

The Carousel component delivers content in a slideshow-like presentation. This UI element is made up of three main areas for the end user to interact with:

• The slide's content, which is configured in the Page Designer
• The progress indication dots, which can be used to skip to specific slides
• The slide navigation buttons, which can move the Carousel forward and backward

Each slide of the Carousel is a container for other components, similar to the Deck component.

Using the Carousel component

Carousels are useful for displaying a rotating set of content in a limited space. They are commonly used for site headlines or image galleries.

Note:  Carefully consider which content appears first in the component. End users may not know to progress to later slides, or may move on to a different area before proceeding, so the first slide may be all your end users see.

Slide source

When building a Carousel, you must first decide its slide source —which determines whether you must construct each individual slide or create a template that's used to generate slides for all rows in a model.

Manually defined slides

When the component's slide source is set to Manual, each slide is a different container with a unique set of components. To define a slide, click Add slide on the component's header within the canvas.

To navigate back and forth while building slides, click the navigation items near the component's header or click the target slide's name. The previous/next arrows that appear in the canvas only function as a preview of what the component looks like at runtime.

Slides based on rows in a model

To create a Carousel that generates a slide for each row in a model.

1. If needed, click the Carousel component in the canvas to access its properties in the Properties pane.
2. Set the Model property to the desired model.

The Add slide button disappears from the component's header in the canvas, and any previously configured slides are removed. It is still possible to revert back to the manually-defined slides using the Undo button as long as you do so before leaving the page.

Once a model is selected, you can then use fields from the model in any of the component properties through typical merge syntax, like {{Name}} or {{Image}}.

Generally it's best to use a merge variable for the Slide name property, so that all slides do not share the same name.

Building slide content

Whether your slides are manually configured or determined by model data, the building blocks remain the same. By default, each slide contains a Responsive Grid component with a single division, and a Header component with the slide's name (through the {{$SlideName}} merge variable) as its content.

Since Carousels are often used for image-centric layouts, the slides Background property is one of the most important to set, as it determines the full size image for the slide. To set it:

1. Click the slide element within the Carousel in the canvas.
2. In the Properties pane, navigate to Styles > Background.
3. Choose whether to use an Image or a Color background for the slide.

Note that slides will not expand their size to fit their background image. Make careful use of the Responsive Grid component's Height and scrolling properties to determine the size of your slide.

Note: If the component's slide source is set to Manual, ensure each slide's Responsive Grid has matching Height and scrolling properties; different slides with different sizes may lead to a poor user experience.

Controlling slide progression

Slides can progress from end user interactions and actions, as well as based on an automatic timer.

• To allow for manual end user control, enable the Show next and previous buttons property.

  • You can create unique next/previous buttons (or trigger slide progression in response to another user action) using the Go to previous slide and Go to next slide actions.

• To progress slides automatically, enable the Automatically transition slides property and set a transition speed in seconds.

This pattern often appears on site landing pages, and can be combined with the Rows in a model slide source to generate automatically scrolling updates, like recent news updates or employee reminders.

Note:  As soon as an end user progresses the slides through the component's previous/next buttons or by activating a Go to previous slide / Go to next slide action, slides no longer automatically transition.

Be wary of enabling too many options—having unclear Carousel progression can cause a confusing user experience.

 

Context considerations

Carousel slides act as context containers that display records related to the row from which they are opened. Each slide has a default context variable—carousel_context—mapped to Id of the clicked row.

If your scenario requires more specific filtering, you can define additional context variables. These variables can then be referenced by the models and components within the slide, ensuring they display the exact subset of data you need.

For more information about context, see the Context topic.

Component actions

Component actions are available using Run component action.

Go to previous slide

Progresses the selected Carousel component to the previous slide.

Go to next slide

Progresses the selected Carousel component to the next slide.

Properties

Component properties

Nested elements

Slide properties