Carousels

Helper for Owl carousel, easily insert multiple carousels on page

Installation
Overview
Hilight
Options
- Numbers and strings
- Boolean or screen sizes
Items
Navigation
Margin
Loop
Dots
Dots click
Autoplay and rewind
Stage padding
Others
Lazy loading
Methods

Installation

jQuery must always be included before other files

<script src="path/to/jquery.js"></script>
<script src="path/to/any-library.js"></script>

Carousels requires the following dependencies:

Overview

Simple component to easily include multiple carousels on a page.

    <div class="my-carousel">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <style>
        /* DEMO ONLY */
        .owl-item {background-color:#F7F7F7;}
        div {text-align:center;}
        .hilight {color:white;background-color:#BA9856;}
    </style>

Hilight

Carousels with uneven amount of item get hilightclass name, useful to customize centered item.

    <div class="my-carousel">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <div class="my-carousel u-mt-xl" mod-items="4">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <style>
        /* DEMO ONLY */
        .owl-item {background-color:#F7F7F7;}
        div {text-align:center;}
        .hilight {color:white;background-color:#BA9856;}
    </style>

Options

Each carousel option can override default parameters for each screen size.

Numbers and strings

mod-[optionName]="[value]" Apply value on all screen sizes.
mod-[optionName]="[value1],...,[valueN]" Responsive values separated by commas, from largest to smallest screen size, where N is the amount of screen sizes.

Examples:

mod-items="5" Apply 5 items on all screen sizes.
mod-items="5,4,2,1" On a framework with 4 screen sizes, apply 5 items on largest screen size to 1 on smallest screen size.
mod-items="6,3,2" On a framework with 3 screen sizes, apply 5 items on largest screen size to 2 on smallest screen size.

Boolean or screen sizes

mod-[optionName]="[true|false]" Apply true or false on all screen sizes.
mod-[optionName]="[screenSizeName1],...,[screenSizeNameN]" Responsive screen size name separared by commas. It applies this option on specified screen size names.

Examples:

mod-loop="true" Enable loop mode on all screen sizes.
mod-loop="sm,md,lg" Enable loop mode on specified screen sizes names of the UI framework.

Items

    <p>Always 2 items</p>
    <div class="my-carousel" mod-items="2">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <p class="u-mt-xl">4 items on xl, lg, md screen sizes but 1 on sm</p>
    <div class="my-carousel" mod-items="4,4,4,1">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <style>
        /* DEMO ONLY */
        .owl-item {background-color:#F7F7F7;}
        div {text-align:center;}
    </style>

    <p>Permanent navigation</p>
    <div class="my-carousel" mod-nav="true">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <p class="u-mt-xl">Navigation on sm and xl screen sizes only</p>
    <div class="my-carousel" mod-nav="sm,xl">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <style>
        /* DEMO ONLY */
        .owl-item {background-color:#F7F7F7;}
        div {text-align:center;}
    </style>

Margin

    <p>Fixed margin between items</p>
    <div class="my-carousel" mod-margin="12">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <p class="u-mt-xl">20px margin on every screen size excepting sm with 2px</p>
    <div class="my-carousel" mod-margin="20,20,20,2">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <style>
        /* DEMO ONLY */
        .owl-item {background-color:#F7F7F7;}
        div {text-align:center;}
    </style>

Loop

    <p>Loop always</p>
    <div class="my-carousel" mod-loop="true">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <p class="u-mt-xl">Loop only on sm, lg and xl screen sizes</p>
    <div class="my-carousel" mod-loop="sm,lg,xl">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <style>
        /* DEMO ONLY */
        .owl-item {background-color:#F7F7F7;}
        div {text-align:center;}
    </style>

Dots

    <p>Always display dots</p>
    <div class="my-carousel" mod-dots="true">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <p class="u-mt-xl">Display dots only on sm, lg and xl screen sizes</p>
    <div class="my-carousel" mod-dots="sm,lg,xl">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <style>
        /* demo only */
        .owl-item {background-color:#F7F7F7;}
        div {text-align:center;}
    </style>

Dots click

By default, click on dots is disabled but it is possible to enable it click on dots with the modifier attribute mod-dots-click="1"

    <div class="my-carousel" mod-dots="true" mod-dots-click="true">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <style>
        /* demo only */
        .owl-item {background-color:#F7F7F7;}
        div {text-align:center;}
    </style>

Autoplay and rewind

    <p>Always autoplay</p>
    <div class="my-carousel" mod-autoplay="true" mod-autoplay_timeout="2000">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <p>Always autoplay with rewind</p>
    <div class="my-carousel" mod-autoplay="true" mod-rewind="true" mod-autoplay_timeout="2000">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <p class="u-mt-xl">Autoplay+rewind only on sm, lg and xl screen sizes</p>
    <div class="my-carousel" mod-autoplay="sm,lg,xl" mod-rewind="true" mod-autoplay_timeout="2000">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <style>
        /* demo only */
        .owl-item {background-color:#F7F7F7;}
        div {text-align:center;}
    </style>

Stage padding

Stage padding is more relevant with loop and margin enabled, but only to get better understanding of the feature. Loop and margin are completely independant from stage padding.

    <p>Fixed stage padding</p>
    <div class="my-carousel" mod-stage_padding="30" mod-loop="true" mod-margin="2">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <p class="u-mt-xl">Different stage padding for each screen size</p>
    <div class="my-carousel" mod-stage_padding="100,80,60,10" mod-loop="true" mod-margin="2">
        <div class="owl-carousel">
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
            <div>Slide 6</div>
        </div>
    </div>
    <style>
        /* demo only */
        .owl-item {background-color:#F7F7F7;}
        div {text-align:center;}
    </style>

Others

Here are the options list with their modifiers.

Option attribute	Type	Default	Description
mod-items	Number	3	The number of items you want to see on the screen.
mod-nav	Screen size name/Boolean	false	Previous and next buttons.
mod-margin	Number	0	margin-right(px) on item.
mod-loop	Screen size name/Boolean	false	Infinity loop. Duplicate last and first items to get loop illusion.
mod-center	Screen size name/Boolean	false	Center item. Works well with even an odd number of items.
mod-mouse_drag	Screen size name/Boolean	true	Mouse drag enabled.
mod-touch_drag	Screen size name/Boolean	true	Touch drag enabled.
mod-pull_drag	Screen size name/Boolean	true	Stage pull to edge.
mod-free_drag	Screen size name/Boolean	false	Item pull to edge.
mod-stage_padding	Number	0	Padding left and right on stage (can see neighbours).
mod-merge	Screen size name/Boolean	false	Merge items. Looking for mod-merge=’{number}’ inside item..
mod-merge_fit	Screen size name/Boolean	true	Fit merged items if screen is smaller than items value.
mod-auto_width	Screen size name/Boolean	false	Set non grid content. Try using width style on divs.
mod-start_position	Number/String	0	Start position or URL Hash string like ‘#id’.
mod-rewind	Screen size name/Boolean	true	Go backwards when the boundary has reached.
mod-slide_by	Number/String	1	Navigation slide by x. ‘page’ string can be set to slide by page.
mod-slide_transition	String	**	You can define the transition for the stage you want to use eg. linear.
mod-dots	Screen size name/Boolean	true	Show dots navigation.
mod-autoplay	Screen size name/Boolean	false	Autoplay.
mod-autoplay_hover_pause	Screen size name/Boolean	false	Pause on mouse hover.
mod-autoplay_timeout	Boolean/Number	false	autoplay interval duration.
mod-nav_speed	Boolean/Number	false	Navigation speed.
mod-callbacks	Boolean	true	Enable callback events.

Lazy loading

For performances purpose, it is possible to load images only for active carousels items: Use data-src-url to apply image as background-image contain mode on any tag.

    <div class="my-carousel" mod-items="2">
        <div class="owl-carousel">
            <img class="u-w-100" data-src-url="https://feassets.bymycar.fr/vo/19/75377/0/renault-kangoo-express-l1-15-dci-90-eco2-energy-occasion-2013-saint-dizier.jpg" alt="Image 1">
            <div class="u-w-100" data-src-url="https://feassets.bymycar.fr/vo/15/72341/0/renault-grand-modus-15-dci-85-eco2-occasion-2008-verdun.jpg"></div>
            <img class="u-w-100" data-src-url="https://feassets.bymycar.fr/vo/44/75082/0/ford-ka-12-69-occasion-2009-luneville.jpg" alt="Image 3">
        </div>
    </div>
    <style>
        /* DEMO ONLY */
        img, .owl-item div {height: 150px;}
    </style>

Methods

The carousels component is entirely embedded into a single window object myCarousels.

myCarousels.default();
// Returns an *object* with all default parameters.

myCarousels.default('breakpoints');
//Returns an *object* with screen sizes names and values.

myCarousels.default('breakpointsValues');
//Returns an *array* with screen sizes values.

myCarousels.start();
//Launch the component.

myCarousels.start();
// Once launched, every carousel instance is registered into myCarousels.instances with its index or id as key.

myCarousels['instances'][index].trigger('next.owl.carousel');
//Go to next item.

myCarousels['instances'][index].trigger('prev.owl.carousel');
//Go to previous item.

// Examples:

myCarousels['instances'][0].trigger('next.owl.carousel');
// Goes to the next item for carousel 0

myCarousels['instances']['foo'].trigger('next.owl.carousel');
// Goes to the next item for carousel with id foo

More methods on the Owl carousel events page.