Carousel

Examples

Web/Mobile

<vega-flex use-native-flex="true" gap="size-32" direction="col">
    <div class="v-w-1/3 " data-shrink="0">
        <vega-flex use-native-flex="true" gap="size-16">
            <vega-button-circle
                id="prevPage#1"
                variant="secondary"
                size="default"
                icon="arrow-left"
                data-shrink="0"
            >
            </vega-button-circle>
            <vega-button-circle
                id="nextPage#1"
                variant="secondary"
                size="default"
                icon="arrow-right"
                data-shrink="0"
            >
            </vega-button-circle>
        </vega-flex>
    </div>
    <div class="v-w-2/3" data-shrink="0">
        <vega-carousel id="carousel#1" per-page="1" spacing="size-32" show-slider="true">
            <vega-card shadow="shadow-card" background-color="bg-primary" padding="size-24"><div class="v-text-primary v-font-p2-short">First page</div></vega-card>
            <vega-card shadow="shadow-card" background-color="bg-primary" padding="size-24"><div class="v-text-primary v-font-p2-short">Second page</div></vega-card>
            <vega-card shadow="shadow-card" background-color="bg-primary" padding="size-24"><div class="v-text-primary v-font-p2-short">Third page</div></vega-card>
        </vega-carousel>
    </div>
</vega-flex>

const carousel = document.getElementById('carousel#1');
const prevIcon = document.getElementById('prevPage#1');
const nextIcon = document.getElementById('nextPage#1');

prevIcon.addEventListener('click', function () {
    carousel.prevPage();
});

nextIcon.addEventListener('click', function () {
    carousel.nextPage();
});

carousel.goToPage(1);

Note: The above example uses Vanilla JS. If you would like to use React, Angular, or Vue, please consult Storybook.

Usage

The vega-carousel is a complex component which constructs a movable carousel which enables users to tab between different cards. It serves the functionality of enabling the inclusion of multiple items on a single page using movable cards without requiring a page refresh.

Properties

Name	Description	Default
per-page	This setting designates the number of cards showing for each page while the screen size is larger than 1024px. Optional	3
spacing	Spacing designates the amount of space between cards. This is set by choosing from a set of preset values: xxs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl. Optional	md
show-slider	This is a Boolean attribute which designates whether or not to show the navigational buttons on the bottom of the slider. Optional	true

For more details, view in Storybook.

Event

When changing a page on a carousel, the vegaPageUpdate event will be dispatched.

document.getElementById("carousel#1").addEventListener("vegaPageUpdate", (e) => { // do something })

Accessibility

Carousels can negatively impact accessibility, particularly for those with motor skills issues.

We have applied the following accessibility adaptations to carousels in Vega:

Text spacing set through style attributes can be adjusted with custom stylesheets.
Color contrast between background and foreground meet WCAG AA requirements.
ARIA attributes are allowed for element roles.
All ARIA attributes have valid values.
Buttons have discernible text.
Nested interactive controls are announced by screen readers.

Best Practices

When not to use a carousel

Avoid making use of frequent movement. This can make users believe they are ads and can result in the content being ignored.
Many users may have trouble reading the text before it advances. Content can also easily be missed by users, as much of it is not visible all the time.
Avoid using a carousel within the “hero” section of the website, as it can create a negative first impression of the site.
Carousels should be avoided within articles; these can create a jarring user experience.

When it is okay to use a carousel

However, if there is a precedence for a carousel, and there is a place where users might expect one, then it can be useful.
Carousels can be useful if a user is expecting a slideshow or a gallery of images to be shown one at a time; it can be better than forcing the user to change pages. If it reduces time and clicks,.a carousel can be used.
Use for visual content; avoid for text-heavy content.
Comparison purposes: it can be helpful if showing users a range of different products, where they can scroll between options.

Advice

Don’t use auto-play. Allow users to take control over their own experience.
Keep text short.
If using carousels on a phone, it’s wise to consider making it touch friendly
Make it easy for users to understand where they are. Provide clear indicators for active slides, and differentiate them from inactive ones.

Don't