Content Carousel Plugin

Instructions

To use the content carousel plugin, wrap your elements inside a tag with data-carousel attribute.

item

item

item

Warning! The carousel is an advanced plugin, which requires editing html code. The carousel is not styled by default, and only provides the mechanics for the carousel function. If you want to create specific styles on elements, you will need to use custom CSS.

Options

data-carousel
Activates the carousel for the element that contains child elements.

data-carousel-items=3
Set how many items to display in a single slide. Default 1

data-carousel-loop=true
Set the carousel to loop

data-carousel-dots=true
Display dot-navigation below the carousel

data-carousel-autoplay=3000
Sets the autoplay interval in milliseconds. Set to false to disable autoplay.

data-responsive=false
Disable automatic responsive layout, with less items visible on smaller devices.

data-attach=[header,content,footer]
Use this option if you want to attach the carousel into the header, before the content or above the footer. By default, the carousel will display in your content, where you add it.

data-carousel-selector="class"
Set a class name if you want the carousel to target specific child elements, excluding othere.

data-carousel-shuffle
Shuffle order of child elements inside the carousel.

All Options

item 1

Example attached to footer