Carousel Component

Synopsis: The carousel component allows the author to create a section that is horizontally swipeable and scrollable on the page, to present various content on individual slides.

Each slide can contain various combinations of components, each independent of the other, however, it is ideal that the slides contain uniform components to present a consistent experience for end users.

The child components used on each slide will respect their own individual responsive layout.

The carousel can be configured to display 1 or more slides at one time, which should be determined by the component used within the slide. For example, if a Resource Card is used, the carousel may be configured to display 3 at a time if each Card is placed one per slide. However, if 3 Cards per slide are used, then you may want to configure the carousel to display 1 slide at a time (revealing 3 cards in proper size dimentions). This will provide a different swipe characteristic, which will be explained below in an example. When larger components are used, such as a Promo Banner, the carousel may be configured to show 1 slide at a time. These settings are controlled individually for desktop, tablet and mobile breakpoints.

NOTE: Notice that each of the below examples use a unique Carousel ID name in the dialog. A unique name is required if you have multiple carousels on one page in order for each to receive it's respective configuration, otherwise the authored configurations will conflict.

Content Fields: 

Carousel Unique Name,  Slides and Slide Unique Name multifields, Transition Time in Sec.

Options: 

Carousel Variation: Preview, Full

Loop: True, False

Desktop Items: Number of items to show in desktop view

Tablet Items: Number of items to show in tablet view

Mobile Items: Number of items to show in mobile view

Carousel Navigation Position: Left, Center, Right

Navigation Arrows Color: Fiserv color palette

Navigation Arrows: On/Off

Navigation Buttons: On/Off

Auto Carousel: Check Box (Default Uncheck)

Usage: All pages.

Note: This should be used as an example only. There will be additional requirements related to each individual component usage and page design, such as font treatments, padding and margin requirements, ADA compliance etc, so please use the below examples for reference only to demonstrate core function.

Scenario 1

Ingredients: 2 Containers, 1 Carousel, 3 Promo Banners (1 per slide), Auto Carousel enabled for 3Sec.

This use case involves an outside container set to full width and an inside container to contain the event list to 1440px with no left/right padding applied.

This is a basic example of a carousel with 3 slides and each slide revolving time set as 3sec, each slide containing a promo banner. The carousel is configured to show 1 slide at a time, which allows the slide to fill 100% of the carousel viewport. The carousel is also set in to Preview so that a small portion of the next slide appears on the right hand side.

Scenario 2

Ingredients: 2 Containers, 1 Carousel, 6 Resource Cards

This example uses 6 resource cards,  3 per slide. The carousel is configured to display 3 slides a time for desktop, 2 at at time for tablet, and 1 at a time for mobile. This demonstrates how the carousel is responsively divided into equal slide sections, and clicking the next item will move the carousel by one item at a time. The carousel is set to Full meaning that there will not be a portion of the next card in the display view on the right hand side.