Carousel.js v2

A lightweight, no dependency, implementation of a carousel. There is minimal CSS provided to help guide the carousel's behavior. As for visual styling, every site has a different theme, so it's better that you provide your own CSS.

Usage

Create a new carousel instance by passing a CSS selector of your carousel to the Carousel class. Each of the immediate children will be considered a slide.

First slide

Third slide

const myCarousel = new Carousel('.my-carousel', { duration: 500 })

Here is the new HTML structure generated from the previous code. Use the class names to customize your own CSS theme.

First slide

Third slide

Options

Options are defined as a Javascript object.

autoPlay (boolean | default: false)

Automatically start the slide show.

delay (integer | default: 4000)

The time in milliseconds between slides when the slide show is active.

duration (integer | default: 400)

The time in milliseconds to transition between slides.

infinite (boolean | default: false)

Repeat the slide deck when either end is reached.

rewind (boolean | default: false)

Rewind over the slide deck when either end is reached.

showControls (boolean | default: true)

Whether or not to render the previous/next controls.

showDots (boolean | default: true)

Whether or not to render the dot indicators.

onSlide (function(toIndex, fromIndex))

A callback function that runs before transitioning to another slide. Return false to stop the transition.

Methods

The carousel constructor returns controls for that carousel.

next()

Transition to the next slide.

previous()

Transition to the previous slide.

goTo(integer)

Transition to the slide at the `slideIndex` position, zero-indexed.

play()

Start playing the slide show.

pause()

Pause the slide show.

Examples

All these examples use the same basic theme located in the source code of this page. You can use it as a starting point, or create your own. Check out the generated HTML structure in the Usage section above.

Welcome!

Here's an example width default options,
but this button can also activate
the next slide

Let's begin

The End!