Carousels

/assets/modules/elements/carousels

  The documentation pages are still being written, please bear with us.

Quick Look

The One-Nexus carousels use OwlCarousel 2 loaded via cdnjs by default

To create a carousel, add the carousel class to a container of elements which will act as the carousel slides:

<div class="carousel">
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
</div>

Sass

Load the carousel styles by including the carousels() mixin:

@include carousels();

The following options can be passed to the mixin to customize default carousels:

Option Description Default
name The name used when generating the CSS selector 'carousel'
output-json Allows the configutation to be accessed in JavaScript true
nav-buttons['enabled'] Determine whether to display the next/previous buttons true
nav-buttons['size'] The size of the next/previous buttons font-size('size-6')
nav-buttons['transition'] The transition for the next/previous buttons core('transition')
nav-buttons['prev'] FontAwesome icon for 'previous' button using content values '\f137'
nav-buttons['next'] FontAwesome icon for 'next' button using content values '\f138'
bullets['enabled'] Determine whether to display pagination bullets true
bullets['size'] The size for pagination bullets 10px
bullets['color'] The color for pagination bullets rgba(black, 0.4)
bullets['transition'] The transition for pagination bullets core('transition')
bullets['active-color'] The color for the active pagination bullet grey

The above options can be passed to the function like so:

@include carousels((
    'nav-buttons':(
        'enabled': false
    ),
    'bullets':(
        'active-color': #C7254F
    )
));

Default carousels will now reflect these options:

<div class="carousel">
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
</div>

JavaScript

Call the carousel() function on your carousel selector:

$('.carousel').carousel();

The following options can be passed to the function to customize the carousels:

Option Description Default
nav Create next/previous buttons true
pagination Create pagination bullets true
owl Pass any custom OwlCarousel options to the carousel {}

The above options can be passed to the function like so:

$('.carousel').carousel({
    pagination: false,
    owl: {
        items: 6
    }
});

Default carousels will now reflect these options:

<div class="carousel">
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
</div>

Examples

You can initiaite multiple carousels on multiple elements if you wish for them to have different options:

In order for your carousel to receive the One-Nexus carousel styles, you must give it a class beginning with carousel-, e.g. carousel-products 

<div class="carousel-products">
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
    <img src="http://lorempixel.com/640/480" />
</div>
$('.carousel-products').carousel({
    owl: {
        items: 2,
        margin: 20
    }
});

Result

Note: You can of course just call the OwlCarousel plugin directly on your element like the below example, but you will lose out on some benefits that the One-Nexus wrapper provides:

$('.carousel-products').owlCarousel({
    items: 2,
    margin: 20
});