Responsive & Flexible Content Slider Plugin - flickity

flickity is a generic, flexible, modular jQuery slider plugin for creating responsive, touch-enabled content sliders/galleries/slideshows/carousels with physics-based animations and full-feature APIs.

Currently licensed GPL v3. Also can be used as a Vanilla JavaScript plugin.

See also:

• Best Carousel Plugins In jQuery/JavaScript/CSS
• flickity-responsive: Responsive option for Flickity.

Install & Download:

# NPM
$ npm install flickity --save

Basic Usage:

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

<!-- from local -->
<link href="dist/flickity.min.css" rel="stylesheet">
<script src="dist/flickity.pkgd.min.js"></script>
<!-- OR from a CDN -->
<link href="https://cdn.jsdelivr.net/npm/flickity@latest/dist/flickity.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flickity.pkgd.min.js"></script>

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

<script src="/path/to/cdn/jquery.min.js"></script>

3. Embed your content into the slider as follows:

<div class="carousel">
  <div class="carousel-cell">Slide 1</div>
  <div class="carousel-cell">Slide 2</div>
  <div class="carousel-cell">Slide 3</div>
  ... More Slides Here ...
</div>

4. Add the data-flickity attribute to the top container to initialize the carousel.

<div class="carousel" data-flickity='{ options here }'>
  <div class="carousel-cell">Slide 1</div>
  <div class="carousel-cell">Slide 2</div>
  <div class="carousel-cell">Slide 3</div>
  ... More Slides Here ...
</div>

5. Initialize the carousel with JavaScript (jQuery).

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

6. Initialize the slider with vanilla JavaScript.

// jQuery
$('.carousel').flickity({
  // options here
});

// Vanilla JS
var myCarousel = new Flickity( '.carousel', {
  // options here
});

7. Config the carousel slider by passing the options object to the Flickity.

$('.carousel').flickity({

  // enable keyboard navigation
  accessibility: true,

  // make the carousel's height fit the selected slide
  adaptiveHeight: false,

  // enable auto play
  // set delay time to enable the autoplay
  // e.g. autoPlay: 5000
  autoPlay: false,

  // 'center', 'left', or 'right'
  // or a decimal 0-1, 0 is beginning (left) of container, 1 is end (right)
  cellAlign: 'center',

  // cell selector
  cellSelector: undefined,

  // will contain cells to container
  // so no excess scroll at beginning or end
  // has no effect if wrapAround is enabled
  contain: false,

  // enable dragging & flicking when the slides > 1
  draggable: '>1',

  // the number of pixels a user must scroll horizontally to start dragging
  dragThreshold: 3,

  // enable content to be freely scrolled and flicked
  // without aligning cells
  freeScroll: false,

  // smaller number = easier to flick farther
  friction: 0.2,

  // group cells together in slides
  groupCells: false,

  // enable image lazy load
  // you can specify the original img src in the data-flickity-lazyload attribute
  lazyLoad: true,

  // intial slide
  initialIndex: 0,

  // set positioning in percent values, rather than pixels
  // Enable if items have percent widths
  // Disable if items have pixel widths, like images
  percentPosition: true,

  // enable next/prev buttons
  prevNextButtons: true,

  // enable pagination dots
  pageDots: true,

  // listens to window resize events to adjust size & positions
  resize: true,

  // enable RTL support
  rightToLeft: false,

  // set the height of the gallery
  setGallerySize: true,

  // 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
  watchCSS: false,

  // at end of cells, wraps-around to first for infinite scrolling
  wrapAround: false

});

8. API methods.

// jQuery
// $carousel.flickity('methodName', parameters);
// Vanilla
// myCarousel.methodName(parameters);

// go to a specific slide
$carousel.flickity( 'select', index, isWrapped, isInstant );

// go to the previous slide
$carousel.flickity( 'previous', isWrapped, isInstant );

// go to the next slide
$carousel.flickity( 'next', isWrapped, isInstant );

// select a slide
$carousel.flickity( 'selectCell', value, isWrapped, isInstant );

// resize & re-position the carousel
$carousel.flickity('resize');
$carousel.flickity('reposition');

// add more slides
$carousel.flickity( 'prepend', elements );
$carousel.flickity( 'append', elements );

// insert a slide
$carousel.flickity( 'insert', elements, index );

// remove a slide
$carousel.flickity( 'remove', elements );

// enable/disable/pause/resume autoplay
$carousel.flickity('playPlayer');
$carousel.flickity('stopPlayer');
$carousel.flickity('pausePlayer')
$carousel.flickity('unpausePlayer');

// set the carousel to fullscreen
$carousel.flickity('viewFullscreen');

// exit the fullscreen mode
$carousel.flickity('exitFullscreen');

// toggle the fullscreen mode
$carousel.flickity('toggleFullscreen');

// destroy the plugin
$carousel.flickity('destroy');

// reload all slides
$carousel.flickity('reloadCells');

// get the elements of the slide
var cellElements = $carousel.flickity('getCellElements');

9. Event handlers.

// jQuery
// $carousel.on('eventName', function);
// $carousel.off('eventName', function);
// $carousel.once('eventName', function);
// Vanilla
// myCarousel.on('eventName', function);
// myCarousel.off('eventName', function);
// myCarousel.once('eventName', function);

$carousel.on( 'ready.flickity', function() {
  // on ready
});

$carousel.on( 'change.flickity', function( event, index ) {
  // on change
});

$carousel.on( 'select.flickity', function( event, index ) {
  // when a slide is selected
});

$carousel.on( 'settle.flickity', function( event, index ) {
  // when the carousel is settled at its end position
});

$carousel.on( 'scroll.flickity', function( event, progress ) {
  // on move
});

$carousel.on( 'dragStart.flickity', function( event, pointer ) {
  // on drag start
});

$carousel.on( 'dragMove.flickity', function( event, pointer, moveVector ) {
  // on drag move
});

$carousel.on( 'dragEnd.flickity', function( event, pointer ) {
  // on drag end
});

$carousel.on( 'pointerDown.flickity', function( event, pointer ) {
  // when the user's pointer (mouse, touch, pointer) presses down
});

$carousel.on( 'pointerMove.flickity', function( event, pointer, moveVector ) {
  // when the user's pointer moves.
});

$carousel.on( 'pointerUp.flickity', function( event, pointer ) {
  // when the user's pointer unpresses
});

$carousel.on( 'staticClick.flickity', function( event, pointer, cellElement, cellIndex ) {
  // when the user's pointer is pressed and unpressed and has not moved enough to start dragging
});

$carousel.on( 'lazyLoad.flickity', function( event, cellElement ) {
  // after an image has been loaded
});

$carousel.on( 'bgLazyLoad.flickity', function( event, element ) {
  // after a background image has been loaded
});

$carousel.on( 'fullscreenChange.flickity', function( event, isFullscreen ) {
  //  after entering or exiting fullscreen mode
});

Changelog:

v2.3.0 (12/20/2021)

• resolve dragging & scrolling on iOS 15

v2.2.2 (01/04/2021)

• bump several dependencies for security alerts
• Switch from Gulp to npm scripts
• Switch linting from JSHint to ESLint
• remove aria-hidden on destroy

2019-08-20

• Doc updated

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.