Carousels

<!-- Content Carousel -->
<div data-c-carousel-wrapper>
    <div data-c-carousel="content">
        <!-- Repeat items as necessary. -->
        <div data-c-carousel-item style="background-image:url('');">
            <!-- This div is the content wrapper. -->
            <div data-c-padding="all(1)" data-c-background="black(100)" data-c-margin="tb(3)">
                <!-- Optional Slide Title -->
                <h5 data-c-margin="bottom(.5)" data-c-font-weight="bold" data-c-colour="white">Slide Title</h5>
                <!-- Slide Content -->
                <p data-c-colour="white">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias architecto exercitationem maiores non iure quas nulla aut nostrum? Eveniet iusto sint ab incidunt blanditiis, vitae quasi debitis illum qui repudiandae!</p>
            </div>
        </div>
    </div>
    <button role="button" aria-label="Previous" data-c-carousel-arrow="prev"><i class="material-icons">arrow_back_ios</i></button>
    <button role="button" aria-label="Next" data-c-carousel-arrow="next"><i class="material-icons">arrow_forward_ios</i></button>
    <div role="tablist" data-c-carousel-dots></div>
</div>

<!-- Image Carousel -->
<div data-c-carousel-wrapper>
    <div data-c-carousel="image">
        <!-- Repeat items as necessary. -->
        <div data-c-carousel-item style="background-image:url('');">
            <!-- Use the background-image property to display an image. -->
        </div>
    </div>
    <button role="button" aria-label="Previous" data-c-carousel-arrow="prev"><i class="material-icons">arrow_back_ios</i></button>
    <button role="button" aria-label="Next" data-c-carousel-arrow="next"><i class="material-icons">arrow_forward_ios</i></button>
    <div role="tablist" data-c-carousel-dots></div>
</div>

Detailed Information

Installing a Carousel

By default, pasting the carousel code above into your project will work out of the box. Sometimes however, you'll want to customize the nuances and functionality of the carousel to suit your specific needs. In order to do this, apply the data-c-custom-carousel data attribute to the carousel. This will tell Clone to skip over it, allowing you to initialize it manually using Glider.js' documentation.

Types of Carousel

<div data-c-carousel="content"></div>

Content type carousels are used to display important information. These carousels provide the opportunity to include photo backgrounds, a title, and paragraph based content.

<div data-c-carousel="image"></div>

Image type carousels can be used to display images in a gallery-type format. The content carousel is more suited for other types of variable media.

Pieces of a Carousel

<div data-c-carousel-wrapper></div>

The carousel wrapper provides important spacing and responsive properties to the carousel itself.

<div data-c-carousel></div>

The carousel element is where you determine the type (outlined above).

<div data-c-carousel-item></div>

Carousel items are what Glider uses to detect and generate slides for the carousel. These elements contain your content.

<div data-c-carousel-arrow="prev"></div>, <div data-c-carousel-arrow="next"></div>

These attributes indicate the triggers for navigating left and right through the carousel's content.

<div data-c-carousel-dots></div>

This element indicates the parent element that contains the carousel's dot navigation structure. Always use this element in partnership with the arrows outlined above.

Examples

Changelog

Version 2.4.0

• Removes Slick Carousel in favour of Glider.js.

Version 2.3.12

• Updates pieces of accordions, alerts, carousels so that their data attributes are specific instead of values.

Version 2.3.4

• Adds variables to customize carousel colours.

Version 2.3.2

• Fixes a bug where carousel active dots would be the same colour as inactive ones.