Carousel¶

Splide.js is currently used as our default carousel. Please click here for more information on the JS library. This extension can be modified to support or be swapped with any carousel library.

Installation¶

Add import {initCarousels} from 'extensions/carousel'; to your Global.js file. Add @import "extensions/carousel/index"; to your Global.scss file.

Future Version¶

Will be moved as an extension in the themes directory for easy access.

Initialization¶

Initialize the function using the following call:

import {initCarousels} from 'extensions/carousel'; // Already included in Global.js

initCarousels() // Already included in Global.js

The above code will look for any elements with the js-carousel class and automatically initiate the carousel.

Custom Initialization¶

// Initialize own custom instance
new Carousel( element, parameters );

HTML Structure¶

<div class="js-carousel g-carousel" data-options="">
    <div class="g-carousel__track">
        <div class="g-carousel__slides">
            <div class="g-carousel__slide">
                Slide
            </div>
            <div class="g-carousel__slide">
                Slide
            </div>
            <div class="g-carousel__slide">
                Slide
            </div>
            <div class="g-carousel__slide">
                Slide
            </div>
        </div>
    </div>
    <div class="splide__arrows">
        <button class="splide__arrow splide__arrow--prev">
            <span class="splide__arrow--icon u-icon-chevron-left"></span>
        </button>
        <button class="splide__arrow splide__arrow--next">
            <span class="splide__arrow--icon u-icon-chevron-right"></span>
        </button>
    </div>
</div>

Options¶

See the following page for information and Options

See the following page for information and API usage

Components and Layouts¶

See the following page for the Components & Layouts setup

Caveats (Splide)¶

Center Mode¶

The Center mode corresponds to the focus setting in the options for the Splide plugin. This will scroll your slider 1 by 1.

By default, the previous and next buttons will move the carousel at the same amount as the Number of Slides option (unless using focus: Center).

Peek Values¶

If you plan on using "peek" values, make sure to designate a left and right value. Setting only one value will break the carousel.