Slider

When to use it

The Slider component is used to create a slideable carousel of items, such as cards or images. It is commonly used to display multiple items in a compact space, allowing users to scroll through the items horizontally.

Variants

The Slider component can be customized using the data-slick attribute to extend or replace the default settings. The component requires the file components.slider.js plus the vendor file slick.js (all bundled within the UI framework JS files).

What it looks like

Code examples

With inline options

<div class="o-grid c-slider" data-slick='{"slidesToShow": 3, "slidesToScroll": 3}'>
    <div class="o-grid__col-3">
        <div class="c-card">
            <a href="#info" class="c-card__body">
                <div class="c-card__image">
                    <img class="c-thumb c-thumb--round lazyload" alt="" data-src="../temp/thumb2.jpg" />
                </div>
                <h2 class="c-card__title">First card</h2>
            </a>
            <div class="c-card__foot">
                <a href="#" class="c-button c-button--primary c-button--small c-button--round">Köp</a>
                <span class="c-card__label">28 apr, Venue, City</span>
            </div>
        </div>
    </div>
    <div class="o-grid__col-3">
        <div class="c-card">
            <a href="#info" class="c-card__body">
                <div class="c-card__image">
                    <img class="c-thumb c-thumb--round lazyload" alt="" data-src="../temp/thumb1.jpg" />
                </div>
                <h2 class="c-card__title">Second card</h2>
            </a>
            <div class="c-card__foot">
                <a href="#" class="c-button c-button--primary c-button--small c-button--round">Köp</a>
                <span class="c-card__label">28 apr, Venue, City</span>
            </div>
        </div>
    </div>
    <div class="o-grid__col-3">
        <div class="c-card">
            <a href="#info" class="c-card__body">
                <div class="c-card__image">
                    <img class="c-thumb c-thumb--round lazyload" data-src="../temp/thumb1.jpg" alt="" />
                </div>
                <h2 class="c-card__title">Third card, with a very much longer title, just to see it fits</h2>
            </a>
            <div class="c-card__foot">
                <a href="#" class="c-button c-button--primary c-button--small c-button--round">Köp</a>
                <span class="c-card__label">28 apr, Very long Venue name too, City</span>
            </div>
        </div>
    </div>
    <div class="o-grid__col-3">
        <div class="c-card">
            <a href="#info" class="c-card__body">
                <div class="c-card__image">
                    <img class="c-thumb c-thumb--round lazyload" alt="" data-src="../temp/thumb2.jpg" />
                </div>
                <h2 class="c-card__title">Fourth card</h2>
            </a>
            <div class="c-card__foot">
                <a href="#" class="c-button c-button--primary c-button--small c-button--round">Köp</a>
                <span class="c-card__label">28 apr, Venue, City</span>
            </div>
        </div>
    </div>
</div>

Accessibility notes

This component relies totally on the third party script (Slick) which states it is accessible. While this may be true, the only thing that matters is to test the implementation of it. This can be done by following these steps:

1. Keyboard Navigation: Ensure users can navigate through the carousel using the keyboard. Provide focus styles for interactive elements.
2. Pause and Play Controls: Include controls to pause and play the carousel to give users control over the content.
3. Announcements: Use ARIA live regions to announce slide changes to screen reader users.
4. Visible Focus: Ensure that focus is visible on all interactive elements within the carousel.
5. Descriptive Labels: Provide descriptive labels for navigation buttons and other controls.

For more detailed guidelines, refer to Accessible Carousels.