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.

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.

  • 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

  • Unique ID (optional): Nintex Apps automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

  • 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. Nintex Apps 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 drop-down menu.

    Note: 

    • To refresh available style variant options, click 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.

  • Slide source: Determines how each slide's content is populated

    • Manual: Slide content is set per slide in the Page Designer.
    • Rows in a model: Slide content is set as a single slide template in the Page Designer, 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.

  • Margins: Sets a component's margin (the space around it) relative to other components on the page.

    • To set margins for all sides, click All.

    • To set margins for each side individually, click Separate.

    Margins must be set using spacing variables defined in the design system. Custom or arbitrary values are not allowed. For more information, see Spacing.

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 an action flow or JavaScript) are saved in the model, or canceled.

    Note:  Updating fields without direct user input can lead to poor user experience, especially when the user may be unaware that field changes are occurring.

    • Retained in model (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.

  1. Click Add a new condition to add a new style variant condition.
  2. Click the new style variant condition and configure.

When Nintex Apps 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 conditions are met.

Context variables for context containers are managed from the Context variables property section. For more information about context variables, see the Context topic.

  1. In the Properties panel, expand the Context variables section.

  2. Click Add context variable.

  3. Enter a Context variable name.

  4. Select a Value type.

  5. Select a Value source.

Nested elements

Slide properties

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

Background source: This controls the appearance of the slide's background.

  • Design system: The background is determined by the slide's style variant.

  • Image: The background is an image file.

    • Image source: Determines where to source the image file from.

      • URL: Displays the image available at the specified URL.

        • Image URL: The URL of the image to display.

          Note: 

          You may also use merge syntax in the URL field. If a merge model is specified, you can reference fields with standard merge variables like {Name}. If no merge model is specified, you can still use global merge syntax.

          For example, if you host an account's logo image at a particular URL, and you want it displayed next to a record, you could use www.YourSite.com/{{$Model.Account.data.0.Name}} for the image URL.

          If you choose to do this, ensure that the variable pulled in by the merge syntax is URL encoded— no spaces.

      • File: Displays an image previously uploaded within Settings > Files.

        • File name: The file to display. Provides autocomplete options based on uploaded files.

      • Attachment: Displays an image that has been uploaded and attached to a record within a model.

        Note: 

        This option only accepts lookup relationship fields that have File as the related object.

        The object must have a custom attachment field created on it.

        • Image field: Click the field picker to select the attachment image's ID field.

          Note: 

          You may need to click next to the image field's name to access and select the actual attachment field ID. You need to select this, not the reference field, for the image component to work.

          If the image field is a Photo URL field, use URL as the image source.

    • Merge model / Model: The selected model provides values for merge syntax or record options for attachments.

    • Alternative text: Determines the descriptive text about the image that can be used by access/assistive technologies, such as screen readers, and conforms to Web Accessibility Initiative—Accessible Rich Internet Applications ( WAI-ARIA ) specifications. This property can be a specific string of text, the merge variables of one or more fields, or a combination of the two.

      Note:  If no alternative text is specified, assistive technologies will either ignore the image or (in some cases) speak a generic label, such as "Image displayed."

    • Size: Control the size of the image.

      • Original: The image will display at its original size, without regard to the size.
      • Contain: The image will scale so that it will at least meet the top and bottom margins.
      • Cover: The image will scale so all parts of the background are covered by the image.

    • Position: 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 the 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 the background. Defaults to transparent.

    • Click the transparent symbol to open color the selection menu.