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 Composer
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.

If needed, click the Carousel component in the canvas to access its properties in the Properties pane.
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:

Click the slide element within the Carousel in the canvas.
In the Properties pane, navigate to Styles > Background.
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 Action Framework 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.

Properties¶

Component properties¶

General [[]]¶

Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.
Slide source: Determines how each slide’s content is populated
- Manual: Slide content is set per slide in the Composer.
- Rows in a model: Slide content is set as a single slide template in the Composer, which is then iterated for all rows in the selected model.
Model: (Appears when the slide source is Rows in a model.) The model whose rows are used to generate slides.
Transition effect: Determines how slides visually shift when the end user navigates forward or backward in the slide rotation.
- None: Slides instantly appear on progression
- Fade: Slides fade into each on progression
- Translate: Slides shift from left to right on progression, giving the appearance of being attached
Automatically transition slides: Determines whether or not the Carousel automatically progresses through its slides if there is no user interaction

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.
Transition speed in seconds: (Appears when Automatically transition slides is enabled) The length of time the slide appears for end users before progressing to the next.
Enable infinite looping: Determines whether or not the Carousel loops to the first slide if end users attempt to progress past the last slide.
Show dots: Determines whether or not the progress indication dots appear beneath the component at runtime.
Show slide counter: Determines whether or not the progress indication counter appears beneath the component at runtime.
Show next and previous buttons: Determines whether or not the pre-built next/previous buttons appear at runtime.
Previous button icon: (Appears when Show next and previous buttons is enabled) Determines which icon on the Carousel’s pre-built previous slide button.
Next button icon: (Appears when Show next and previous buttons is enabled) Determines which icon on the Carousel’s pre-built next slide button.

Styles [[]]¶

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component’s style. Also, Skuid builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

Note

To refresh available style variant options, click refresh Refresh style variants.

This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.
Margin: Sets a component’s margin (the space around it) relative to other components on the page.
- To set margins for all sides, click border-all All.
- To set margins for each side individually, click border-separate Separate.
Margin values can be set to any configured spacing variable for the page’s design system. Margin cannot be set an arbitrary value; it must use a design system variable.

Display logic [[]]¶

Note

For information on individual condition properties, see the Display Logic docs.

Render conditions¶

These conditions govern when an element or component will display.

Render if…: The conditions that must be met to enable the element’s display.
- ALL conditions are met
- ANY conditions are met
- Custom logic is met
  - Condition logic: The custom logic for grouping and applying one or more conditions.
If hidden, model field changes should be: (only available on Field rendering tabs) If the field is hidden by conditional rendering, this property determines whether any changes made to this field (via Action Framework or JavaScript) are saved in the model, or canceled.

Note

Depending on the needs of your org, it could be bad user experience to update fields without direct user input especially when that user may be unaware of they are doing so.
- Retained in model (the default)
- Cancelled

Style variant conditions¶

These conditions govern which style variant is applied and displayed on a component or element.

Note

You can create one, or more, style variant conditions and set each individually.

Click add Add a new condition to add a new style variant condition.
Then, click the new style variant condition and configure.

When Skuid executes the display logic, the style variant conditions are evaluated in order.

Use this Style Variant if…: The model conditions that must be met to enable the styling.
- ALL conditions are met
- ANY conditions are met
- Custom logic is met
  - Condition logic: The custom logic for grouping and applying one or more conditions.
- Style variant: The style variant to be rendered if condition(s) are met.

Nested elements¶

Slide properties¶

General [[]]¶

Slide name: Determines the name of the slide, which is available through the {{SlideName}} merge variable.

Styles [[]]¶

Style variant [[]]¶

Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component’s style. Also, Skuid builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

Background [[]]¶

Background type: This controls the appearance of the slide’s background.

Default
Image: Pulls in an image from a Skuid data source.
- Data source type: Select the data source type from which you will be pulling the image.
Note

Select “Ui-Only” for images associated with Ui-Only models.
- Data source: Choose the specific data source containing the desired image. (Defaults to “Ui-only” for Ui-only models.)
- Image Source:
  Static resource:
  
  Note
  
  You must have an image file uploaded as a static resource.
  
  Resource name: If the file has been correctly uploaded, when you start typing the filename, Skuid will autocomplete.
  
  URL:
  
  Model: Skuid presents a list of available Models in the dropdown, and selects one for this field, but you can change it.
  
  Image URL: The URL field. The user can select a URL field from the model, enter the complete URL, or use a global merge value to identify the URL.
  
  Note
  
  While the latter two options do not require a model to be specified, when using merge fields for the URL, setting the model provides the needed model row context.
- Size: Control the size of the image.
  - Original: The image will display at its original size, without regard to the size of the slide.
  - Contain: The image will scale so that it will at least meet the top and bottom margins of the slide.
  - Cover: The image will scale so all parts of the slide’s background are covered by the image.
- Position: Choose the orientation of the image within the slide.
- Repeat: Determine if the image will repeat vertically, horizontally or both.
  - No Repeat
  - Horizontal
  - Vertical
  - Both
- Special effects: Add special effects to slide image.
  No effects
  
  Parallax means that, when scrolling, the contents in the grid will scroll over the image
- Color: Background color behind image. Defaults to transparent.
  - Click the transparent symbol to open color the selection menu.
Color: Choose a color to serve as slide background. Defaults to transparent.
- Click the transparent symbol to open color the selection menu.