Responsive & Flexible Content Slider Plugin - flickity

flickity is a generic, flexible, modular jQuery slider plugin for creating responsive, touch-enable content sliders/gallaries/slideshows/carousels with physics-based animations and full-feature APIs. Flickity is currently licensed GPL v3.

Basic Usage:

1. Include the flickity's JavaScript and CSS in the document.

<link href="css/flickity.css" rel="stylesheet">
<script src="dist/flickity.pkgd.js"></script>

2. Include the jQuery library in the document (OPTIONAL).

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

3. Embed your content into the slider like this:

<div class="carousel">
  <div class="slide"><img src="https://unsplash.it/1600/800?image=615"></div>
  <div class="slide"><img src="https://unsplash.it/1600/800?image=614"></div>
  <div class="slide"><img src="https://unsplash.it/1600/800?image=613"></div>
  <div class="slide"><img src="https://unsplash.it/1600/800?image=612"></div>
  <div class="slide"><img src="https://unsplash.it/1600/800?image=611"></div>
</div>

4. Make the slides have 100% width so that the slider will only display one image at a time.

.slide {
  width: 100%;
  height: 600px;
}

5. Initialize the slider with jQuery.

$('.carousel').flickity();

6. Initialize the slider with vanilla JavaScript.

var demo = new flickity('.carousel',{//options});

7. Initialize the slider with data-* attribute in your Html.

<div id="slider" class="js-flickity"
     data-flickity-options='{}'>

8. All the default options.

$('.carousel').flickity({
accessibility: true,
// enable keyboard navigation, pressing left & right keys
autoPlay: false,
// advances to the next cell
// if true, default is 3 seconds
// or set time between advances in milliseconds
// i.e. `autoPlay: 1000` will advance every 1 second
cellAlign: 'center',
// alignment of cells, 'center', 'left', or 'right'
// or a decimal 0-1, 0 is beginning (left) of container, 1 is end (right)
cellSelector: undefined,
// specify selector for cell elements
contain: false,
// will contain cells to container
// so no excess scroll at beginning or end
// has no effect if wrapAround is enabled
draggable: true,
// enables dragging & flicking
freeScroll: false,
// enables content to be freely scrolled and flicked
// without aligning cells
friction: 0.2,
// smaller number = easier to flick farther
imagesLoaded: false,
// if imagesLoaded is present, Flickity can re-position cells
// once images are loaded
initialIndex: 0,
// zero-based index of the initial selected cell
percentPosition: true,
// sets positioning in percent values, rather than pixels
// Enable if items have percent widths
// Disable if items have pixel widths, like images
prevNextButtons: true,
// creates and enables buttons to click to previous & next cells
pageDots: true,
// create and enable page dots
resizeBound: true,
// listens to window resize events to adjust size & positions
watchCSS: false,
// watches the content of :after of the element
// activates if #element:after { content: 'flickity' }
// IE8 and Android 2.3 do not support watching :after
// set watch: 'fallbackOn' to enable for these browsers
wrapAround: false
// at end of cells, wraps-around to first for infinite scrolling
});

Change log:

v2.1.2 (2018-10-08)

• Fix dragging on (iOS 9.3 / Safar), copy pageX, pageY in _pointerDownDefault

This awesome jQuery plugin is developed by metafizzy. For more Advanced Usages, please check the demo page or visit the official website.