Flickity

Touch, responsive, flickable carousels.
Plugin documentation

...
...
...
...
...

Responsive initialization

Easily initialize Flickity depending on the viewport width with .flickity-{breakpoint} or .flickity-{breakpoint}-none modifiers. Flickity will be enabled or disabled at the specified and all subsequent breakpoints. Requires watchCSS to be set to true.

...
...
...
...
...

Progress

Turn page dots into a progress bar with the .flickity-page-dots-progress modifier. Requires pageDots to be set to true.

...
...
...
...
...

Inner dots

Move page dots inside the flickity container with the .flickity-page-dots-inner modifier. Requires pageDots to be set to true.

...
...
...
...
...

Large buttons

Increase the size of the Flickity buttons with the .flickity-buttons-lg modifier. Requires prevNextButtons to be set to true.

...
...
...
...
...

Offset buttons

Move the Flickity buttons in the bottom left corner with the .flickity-buttons-bottom-left modifier. Requires prevNextButtons to be set to true.

...
...
...
...
...