Carousels

Requires jQuery
Requires in-view.js
Requires lazy-loading.js
Requires owl.carousel.js
Requires carousels.js

Simple component to include multiple carousels on a page.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6


.owl-item {background-color:#F7F7F7;}
div {text-align:center;}
.hilight {color:white;background-color:#BA9856;}


myCarousels.start();

Hilight

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

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6


.owl-item {background-color:#F7F7F7;}
div {text-align:center;}
.hilight {color:white;background-color:#BA9856;}


myCarousels.start();

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 design system with 4 screen sizes, apply 5 items on largest screen size to 1 on smallest screen size.
mod-items="6,3,2" On a design system 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 design system.

Items

Always 2 items

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

4 items on xl, lg, md screen sizes but 1 on sm

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6


/* demo only */
.owl-item {background-color:#F7F7F7;}
div {text-align:center;}


/* demo only */
myCarousels.start();

Permanent navigation

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Navigation on sm and xl screen sizes only

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6


/* demo only */
.owl-item {background-color:#F7F7F7;}
div {text-align:center;}


/* demo only */
myCarousels.start();

Margin

Fixed margin between items

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

20px margin on every screen size excepting sm with 2px

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6


/* demo only */
.owl-item {background-color:#F7F7F7;}
div {text-align:center;}


/* demo only */
myCarousels.start();

Loop

Loop always

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Loop only on sm, lg and xl screen sizes

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6


/* demo only */
.owl-item {background-color:#F7F7F7;}
div {text-align:center;}


/* demo only */
myCarousels.start();

Dots

Always display dots

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Display dots only on sm, lg and xl screen sizes

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6


/* demo only */
.owl-item {background-color:#F7F7F7;}
div {text-align:center;}


/* demo only */
myCarousels.start();

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"

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6


/* demo only */
.owl-item {background-color:#F7F7F7;}
div {text-align:center;}


/* demo only */
myCarousels.start();

Autoplay and rewind

Always autoplay

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Always autoplay with rewind

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Autoplay+rewind only on sm, lg and xl screen sizes

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6


/* demo only */
.owl-item {background-color:#F7F7F7;}
div {text-align:center;}


/* demo only */
myCarousels.start();

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.

Fixed stage padding

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Different stage padding for each screen size

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6


/* demo only */
.owl-item {background-color:#F7F7F7;}
div {text-align:center;}


/* demo only */
myCarousels.start();

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.


img, .owl-item div {height: 150px;}


myCarousels.start();

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.

Once myCarousels.start() is launched, every carousel instance is stocked 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.