Content Carousel Plugin

Use the content carousel plugin to add html elements in an interactive carousel.

Elephant

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lorem lorem. Nam lectus enim, feugiat a consequat in, faucibus sit amet felis. Vestibulum nec felis pellentesque, pretium sem non, maximus purus.

Kangaroo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lorem lorem. Nam lectus enim, feugiat a consequat in, faucibus sit amet felis. Vestibulum nec felis pellentesque, pretium sem non, maximus purus.

Crocodile

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lorem lorem. Nam lectus enim, feugiat a consequat in, faucibus sit amet felis. Vestibulum nec felis pellentesque, pretium sem non, maximus purus.

Giraffe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lorem lorem. Nam lectus enim, feugiat a consequat in, faucibus sit amet felis. Vestibulum nec felis pellentesque, pretium sem non, maximus purus.

Gorilla

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lorem lorem. Nam lectus enim, feugiat a consequat in, faucibus sit amet felis. Vestibulum nec felis pellentesque, pretium sem non, maximus purus.

Tiger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lorem lorem. Nam lectus enim, feugiat a consequat in, faucibus sit amet felis. Vestibulum nec felis pellentesque, pretium sem non, maximus purus.

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.

Elephant

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lorem lorem. Nam lectus enim, feugiat a consequat in, faucibus sit amet felis. Vestibulum nec felis pellentesque, pretium sem non, maximus purus.

Kangaroo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lorem lorem. Nam lectus enim, feugiat a consequat in, faucibus sit amet felis. Vestibulum nec felis pellentesque, pretium sem non, maximus purus.

Crocodile

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lorem lorem. Nam lectus enim, feugiat a consequat in, faucibus sit amet felis. Vestibulum nec felis pellentesque, pretium sem non, maximus purus.

Giraffe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lorem lorem. Nam lectus enim, feugiat a consequat in, faucibus sit amet felis. Vestibulum nec felis pellentesque, pretium sem non, maximus purus.

Gorilla

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lorem lorem. Nam lectus enim, feugiat a consequat in, faucibus sit amet felis. Vestibulum nec felis pellentesque, pretium sem non, maximus purus.

Tiger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lorem lorem. Nam lectus enim, feugiat a consequat in, faucibus sit amet felis. Vestibulum nec felis pellentesque, pretium sem non, maximus purus.

All Options


item 1

Example attached to footer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lorem lorem. Isaac Asimove
Nam lectus enim, feugiat a consequat in, faucibus sit amet felis. Albert Feinstein
Vestibulum nec felis pellentesque, pretium sem non, maximus purus. General Custard
Nulla dignissim congue consequat. John Wayne
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Albert Broccoli
Nunc viverra eros diam, nec convallis odio pretium laoreet. Mr. Dobalina