Flickity

https://flickity.metafizzy.co/
Admin
Flickity is a touch-enabled, responsive JavaScript library for creating physics-based carousels,...
Tokens:19,924
Snippets:260
Trust Score:9.6
Update:2 months ago
Show doc for...
Tokens:
Raw
### Start auto-play with playPlayer

Source: https://flickity.metafizzy.co/api

Starts auto-play functionality. Auto-play starts automatically on initialization if configured, making this method optional.

```javascript
// jQuery
$carousel.flickity('playPlayer')
```

```javascript
// vanilla JS
flkty.playPlayer()
```

--------------------------------

### dragStart

Source: https://flickity.metafizzy.co/events

Triggered when dragging starts and the slider starts moving.

```APIDOC
## dragStart

### Description
Triggered when dragging starts and the slider starts moving.

### Parameters
- **event** (Event) - Original event object (mousedown, touchstart, or pointerdown).
- **pointer** (Event/Touch) - The event object containing pageX and pageY coordinates.
```

--------------------------------

### Install via CDN

Source: https://flickity.metafizzy.co/

Include the required CSS and JavaScript files directly from unpkg.

```html
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
```

```html
<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
```

--------------------------------

### Handle dragStart event

Source: https://flickity.metafizzy.co/events

Triggered when dragging starts and the slider starts moving.

```javascript
// jQuery
$carousel.on( 'dragStart.flickity', function( event, pointer ) {...});
```

```javascript
// vanilla JS
flkty.on( 'dragStart', function( event, pointer ) {...});
```

--------------------------------

### Configure initialIndex

Source: https://flickity.metafizzy.co/options

Set the starting cell using a zero-based index or a selector string.

```javascript
initialIndex: 2
```

```javascript
initialIndex: '.is-initial-select'
```

```html
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell is-initial-select"></div>
<div class="carousel-cell"></div>
```

--------------------------------

### Configure lazyLoad for images

Source: https://flickity.metafizzy.co/options

Examples for setting up lazy loading on image elements using data attributes and configuration options.

```html
<img data-flickity-lazyload="full.jpg" />
<!-- Set optional placeholder src -->
<img src="placeholder.jpg" data-flickity-lazyload="full.jpg" />
```

```javascript
lazyLoad: true
// lazyloads image in selected slide
```

```html
<div class="carousel">
  <div class="carousel-cell">
    <img class="carousel-cell-image"
      data-flickity-lazyload="tulip.jpg" />
  </div>
  <div class="carousel-cell">
    <img class="carousel-cell-image"
      data-flickity-lazyload="grapes.jpg" />
  </div>
  ...
</div>
```

--------------------------------

### Install and Use Flickity Add-ons with Webpack

Source: https://flickity.metafizzy.co/extras

Install specific add-on packages and require them to enable additional functionality.

```bash
npm install flickity-imagesloaded
npm install flickity-fullscreen
```

```javascript
var Flickity = require('flickity');
require('flickity-imagesloaded');
require('flickity-fullscreen');

// now use imagesLoaded and fullscreen
var flkty = new Flickity( '.carousel', {
  imagesLoaded: true,
  fullscreen: true,
});
```

--------------------------------

### Install Flickity via npm

Source: https://flickity.metafizzy.co/extras

Use npm to add the Flickity package to your project dependencies.

```bash
npm install flickity
```

--------------------------------

### playPlayer

Source: https://flickity.metafizzy.co/api

Starts the auto-play functionality for the carousel.

```APIDOC
## playPlayer

### Description
Starts auto-play. Setting `autoPlay` will automatically start auto-play on initialization.

### Usage
- jQuery: `$carousel.flickity('playPlayer')`
- Vanilla JS: `flkty.playPlayer()`
```

--------------------------------

### Enable Fade Transition

Source: https://flickity.metafizzy.co/options

Requires the flickity-fade package installed separately.

```javascript
fade: true

```

--------------------------------

### Resize carousel CSS

Source: https://flickity.metafizzy.co/api

CSS styles for the carousel expansion example.

```css
.carousel { width: 50%; }
.carousel.is-expanded { width: 100%; }

.carousel.is-expanded .carousel-cell {
  height: 320px;
}
```

--------------------------------

### Reposition cells on click

Source: https://flickity.metafizzy.co/api

Example of repositioning cells after toggling a class on a clicked cell.

```javascript
$carousel.on( 'staticClick', function( event, pointer, cellElement, cellIndex ) {
  if ( !cellElement ) {
    return;
  }
  $( cellElement ).toggleClass('is-expanded');
  $carousel.flickity('reposition');
});
```

--------------------------------

### Style carousel cell dimensions

Source: https://flickity.metafizzy.co/style

Examples of setting cell width and height using various units and responsive techniques.

```css
.carousel-cell {
  width: 100%; /* full width */
  height: 160px; /* height of carousel */
  margin-right: 10px;
}
```

```css
.carousel-cell {
  width: 50%; /* half-width */
  height: 160px;
  margin-right: 10px;
}
```

```css
.carousel-cell {
  width: 33%;
  height: 160px;
  margin-right: 10px;
}
.carousel-cell.size-180 { width: 180px; }
.carousel-cell.size-large { width: 75%; }
```

```css
/* default full-width cells */
.carousel-cell {
  width: 100%;
  height: 160px;
  margin-right: 10px;
}

@media screen and ( min-width: 768px ) {
  /* half-width cells for larger devices */
  .carousel-cell { width: 50%; }
}
```

--------------------------------

### Use Flickity as a jQuery Plugin with RequireJS and pkgd

Source: https://flickity.metafizzy.co/extras

Bridge Flickity to jQuery using the jquery-bridget module within a RequireJS setup.

```javascript
// require the require function
requirejs( [ 'require', 'jquery', 'path/to/flickity.pkgd.js' ],
  function( require, $, Flickity ) {
    // require jquery-bridget, it's included in flickity.pkgd.js
    require( [ 'jquery-bridget/jquery-bridget' ],
    function( jQueryBridget ) {
      // make Flickity a jQuery plugin
      jQueryBridget( 'flickity', Flickity, $ );
      // now you can use $().flickity()
      var $carousel = $('.carousel').flickity({...});
    }
  );
});
```

--------------------------------

### Fullscreen image carousel with transform centering

Source: https://flickity.metafizzy.co/options

Example configuration and CSS for centering images using transform in a fullscreen carousel.

```javascript
fullscreen: true,
lazyLoad: 2
```

```html
<div class="carousel">
  <img class="carousel-image"
    data-flickity-lazyload="orange-tree.jpg" />
  <img class="carousel-image"
    data-flickity-lazyload="tulip.jpg" />
  ...
```

```css
.carousel-image {
  display: block;
  height: 200px;
  /* set min-width,
     allow images to determine cell width */
  min-width: 150px;
  max-width: 100%;
  margin-right: 10px;
  /* vertically center */
  top: 50%;
  transform: translateY(-50%)
}

.carousel.is-fullscreen .carousel-image {
  height: auto;
  max-height: 100%;
}
```

--------------------------------

### Fullscreen image carousel with flexbox centering

Source: https://flickity.metafizzy.co/options

Example configuration and CSS for centering images in a fullscreen carousel.

```javascript
fullscreen: true,
lazyLoad: 1
```

```html
<div class="carousel">
  <div class="carousel-cell">
    <img data-flickity-lazyload="orange-tree.jpg" />
  </div>
  <div class="carousel-cell">
    <img data-flickity-lazyload="tulip.jpg" />
  </div>
  ...
```

```css
.carousel-cell {
  width: 100%; /* full width */
  height: 200px;
  background: #222;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel.is-fullscreen .carousel-cell {
  height: 100%;
}

.carousel-cell img {
  display: block;
  max-height: 100%;
}
```

--------------------------------

### staticClick

Source: https://flickity.metafizzy.co/events

Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging.

```APIDOC
## staticClick

### Description
Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging. This event is useful for detecting clicks on carousel cells.

### Parameters
- **event** (Event) - Original event object.
- **pointer** (Event/Touch) - The event object that has .pageX and .pageY.
- **cellElement** (Element) - If a cell was clicked, the element.
- **cellIndex** (Integer) - If a cell was clicked, the cell’s zero-based number.
```

--------------------------------

### Resize carousel on interaction

Source: https://flickity.metafizzy.co/api

Example of triggering a resize after toggling a CSS class that changes the carousel dimensions.

```javascript
$('.button--resize').on( 'click', function() {
  // expand carousel by toggling class
  $carousel.toggleClass('is-expanded')
    .flickity('resize');
});
```

--------------------------------

### Get Flickity Instance via Element

Source: https://flickity.metafizzy.co/api

Retrieves the Flickity instance using a DOM element or selector string, useful for instances initialized via HTML data attributes.

```javascript
var flkty = Flickity.data( element )
```

```html
<!-- init Flickity in HTML -->
<div class="main-carousel" data-flickity>...</div>
```

```javascript
// jQuery
// pass in the element, $element[0], not the jQuery object
var flkty = Flickity.data( $('.main-carousel')[0] )
// vanilla JS
var carousel = document.querySelector('.main-carousel')
var flkty = Flickity.data( carousel )
// using a selector string
var flkty = Flickity.data('.main-carousel')
```

--------------------------------

### Bundle with Webpack

Source: https://flickity.metafizzy.co/extras

Run the webpack command to bundle your main entry file.

```bash
webpack main.js bundle.js
```

--------------------------------

### Bundle with Browserify

Source: https://flickity.metafizzy.co/extras

Use the browserify command to bundle your application code.

```bash
browserify main.js -o bundle.js
```

--------------------------------

### Initialize Flickity with RequireJS

Source: https://flickity.metafizzy.co/extras

Load the flickity.pkgd.js file using RequireJS and initialize the carousel.

```javascript
requirejs( [
  'path/to/flickity.pkgd.js',
], function( Flickity ) {
  var flkty = new Flickity( '.carousel', {...});
});
```

--------------------------------

### Get Cell Elements

Source: https://flickity.metafizzy.co/api

Retrieves an array of elements representing the carousel cells.

```javascript
// jQuery
var cellElements = $carousel.flickity('getCellElements')
```

```javascript
// vanilla JS
var cellElements = flkty.getCellElements()
```

--------------------------------

### Use Flickity as a jQuery Plugin with RequireJS and Package Managers

Source: https://flickity.metafizzy.co/extras

Configure paths for jQuery and use $.bridget to initialize the plugin.

```javascript
requirejs.config({
  baseUrl: 'node_modules/',
  paths: {
    jquery: 'jquery/jquery'
  }
});

requirejs( [
    'jquery',
    'flickity/js/index',
    'jquery-bridget/jquery-bridget'
  ],
  function( $, Flickity ) {
    // make Flickity a jQuery plugin
    $.bridget( 'flickity', Flickity, $ );
    // now you can use $().flickity()
    var $carousel = $('.carousel').flickity({...});
});
```

--------------------------------

### Include local files

Source: https://flickity.metafizzy.co/

Reference local Flickity files in your project.

```html
<link rel="stylesheet" href="/path/to/flickity.css" media="screen">
```

```html
<script src="/path/to/flickity.pkgd.min.js"></script>
```

--------------------------------

### Initialize with vanilla JavaScript

Source: https://flickity.metafizzy.co/

Use the Flickity constructor with a DOM element or selector string.

```javascript
var elem = document.querySelector('.main-carousel');
var flkty = new Flickity( elem, {
  // options
  cellAlign: 'left',
  contain: true
});

// element argument can be a selector string
//   for an individual element
var flkty = new Flickity( '.main-carousel', {
  // options
});
```

--------------------------------

### Bind events via on option

Source: https://flickity.metafizzy.co/events

Configure events during initialization by passing an object to the 'on' option.

```javascript
// jQuery
var $carousel = $('.carousel').flickity({
  on: {
    ready: function() {
      console.log('Flickity is ready');
    },
    change: function( index ) {
      console.log( 'Slide changed to' + index );
    }
  }
});
```

```javascript
// vanilla JS
var flkty = new Flickity( '.carousel', {
  on: {
    ready: function() {
      console.log('Flickity is ready');
    },
    change: function( index ) {
      console.log( 'Slide changed to' + index );
    }
  }
});
```

--------------------------------

### Get Flickity Instance from jQuery

Source: https://flickity.metafizzy.co/api

Accesses the Flickity instance from a jQuery object to interact with its properties.

```javascript
var flkty = $('.carousel').data('flickity')
// access Flickity properties
console.log( 'carousel at ' + flkty.selectedIndex )
```

--------------------------------

### Initialize Flickity with Add-ons via RequireJS

Source: https://flickity.metafizzy.co/extras

Load Flickity and its add-ons as dependencies in a RequireJS define or require block.

```javascript
requirejs( [
  'path/to/flickity.pkgd.js',
  'path/to/flickity-imagesloaded/flickity-imagesloaded.js',
  'path/to/flickity-fullscreen/fullscreen.js',
], function( Flickity ) {
  var flkty = new Flickity( '.carousel', {
    imagesLoaded: true,
    fullscreen: true,
  });
});
```

--------------------------------

### Toggle Flickity Initialization

Source: https://flickity.metafizzy.co/api

Demonstrates how to toggle Flickity on and off using a button click event.

```javascript
var $carousel = $('.carousel').flickity();
var isFlickity = true;
// toggle Flickity on/off
$('.button--toggle').on( 'click', function() {
  if ( isFlickity ) {
    // destroy Flickity
    $carousel.flickity('destroy');
  } else {
    // init new Flickity
    $carousel.flickity();
  }
  isFlickity = !isFlickity;
});
```

--------------------------------

### ready

Source: https://flickity.metafizzy.co/events

Triggered after Flickity has been activated.

```APIDOC
## ready

### Description
Triggered after Flickity has been activated.

### Usage
- jQuery: `$carousel.on( 'ready.flickity', callback );`
- Vanilla JS: `flkty.on( 'ready', callback );`
```

--------------------------------

### Initialize with HTML data attributes

Source: https://flickity.metafizzy.co/

Configure Flickity directly in HTML using the data-flickity attribute with valid JSON.

```html
<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
```

--------------------------------

### Bind events with vanilla JS

Source: https://flickity.metafizzy.co/events

Use native .on(), .off(), and .once() methods for event management.

```javascript
// vanilla JS
function listener(/* parameters */) {
  console.log('eventName happened');
}
// bind event listener
flkty.on( 'eventName', listener );
// unbind event listener
flkty.off( 'eventName', listener );
// bind event listener to trigger once. note ONCE not ONE or ON
flkty.once( 'eventName', function() {
  console.log('eventName happened just once');
});
```

--------------------------------

### Initialize with jQuery

Source: https://flickity.metafizzy.co/

Use the jQuery plugin syntax to initialize the carousel on a selector.

```javascript
$('.main-carousel').flickity({
  // options
  cellAlign: 'left',
  contain: true
});
```

--------------------------------

### Listen for bgLazyLoad event

Source: https://flickity.metafizzy.co/events

Triggered after a background image has been loaded with bgLazyLoad.

```javascript
// jQuery
$carousel.on( 'bgLazyLoad.flickity', function( event, element ) {...});
```

```javascript
// vanilla JS
flkty.on( 'bgLazyLoad', function( event, element ) {...});
```

--------------------------------

### Initialization Event Binding

Source: https://flickity.metafizzy.co/events

Bind events during Flickity initialization using the 'on' option object.

```APIDOC
## Initialization Event Binding

### Description
Bind events within Flickity's options by setting `on` to an Object. The object's keys should match the event names. This is useful for capturing events like `ready` upon initialization.

### Usage
```javascript
var flkty = new Flickity( '.carousel', {
  on: {
    ready: function() {
      console.log('Flickity is ready');
    },
    change: function( index ) {
      console.log( 'Slide changed to' + index );
    }
  }
});
```
```

--------------------------------

### Configure bgLazyLoad

Source: https://flickity.metafizzy.co/options

Lazy load background images using the flickity-bg-lazyload package and data attributes.

```html
<div class="carousel-cell" data-flickity-bg-lazyload="image.jpg"></div>
```

```javascript
bgLazyLoad: true
// lazyloads background image in selected slide
```

```html
<div class="carousel">
  <div class="carousel-cell"
    data-flickity-bg-lazyload="tulip.jpg"></div>
  <div class="carousel-cell"
    data-flickity-bg-lazyload="breakfast.jpg"></div>
    ...
</div>
```

--------------------------------

### Configure lazyLoad with srcset

Source: https://flickity.metafizzy.co/options

Use data-flickity-lazyload-srcset for responsive images and data-flickity-lazyload-src for fallback support.

```javascript
lazyLoad: true
```

```html
<img class="carousel-cell-image"
  data-flickity-lazyload-srcset="
    walrus-large.jpg 720w,
    walrus-med.jpg 360w"
  sizes="(min-width: 1024px) 720px, 360px"
  data-flickity-lazyload-src="walrus-large.jpg"
  />
```

--------------------------------

### Enable Flickity via CSS

Source: https://flickity.metafizzy.co/options

Uses the :after pseudo-element content to toggle Flickity initialization based on media queries.

```javascript
watchCSS: true
// enable Flickity in CSS when
// element:after { content: 'flickity' }

```

```css
/* enable Flickity by default */
.carousel:after {
  content: 'flickity';
  display: none; /* hide :after */
}

@media screen and ( min-width: 768px ) {
  /* disable Flickity for large devices */
  .carousel:after {
    content: '';
  }
}

```

--------------------------------

### Invoke Flickity Methods

Source: https://flickity.metafizzy.co/api

Demonstrates the difference between jQuery chaining and vanilla JavaScript method calls.

```javascript
var $carousel = $('.carousel').flickity()
  .flickity('next')
  .flickity( 'select', 4 );
```

```javascript
// vanilla JS
var flkty = new Flickity('.carousel');
flkty.next();
flkty.select( 3 );
```

--------------------------------

### Configure RequireJS for Package Managers

Source: https://flickity.metafizzy.co/extras

Set up RequireJS paths to resolve dependencies from node_modules.

```javascript
requirejs.config({
  baseUrl: 'node_modules/',
  paths: {
    app: '../'
  }
});

requirejs( [
  'flickity/js/index',
  'app/my-component.js'
], function( Flickity, myComp ) {
  var flkty = new Flickity( '.carousel', {...});
});
```

--------------------------------

### Enable Hash Navigation

Source: https://flickity.metafizzy.co/options

Allows selecting slides via URL hashes. Requires the flickity-hash package.

```javascript
hash: true

```

```html
<!-- add ids to cell elements -->
<div class="carousel">
  <div class="carousel-cell" id="carousel-cell1">
    ...</div>
  <div class="carousel-cell" id="carousel-cell2">
    ...</div>
  <div class="carousel-cell" id="carousel-cell3">
    ...</div>
  ...
</div>

<!-- link to cells -->
<a href="#carousel-cell2">View cell 2</a>

```

--------------------------------

### Configure resize

Source: https://flickity.metafizzy.co/options

Enable or disable automatic resizing logic when the window changes size.

```javascript
resize: false
// disables resize logic
```

```css
/* carousel has fixed width */
.carousel {
  width: 300px;
}
```

--------------------------------

### Listen for fullscreenChange event

Source: https://flickity.metafizzy.co/events

Triggered after entering or exiting fullscreen view.

```javascript
// jQuery
$carousel.on( 'fullscreenChange.flickity', function( event, isFullscreen ) {...});
```

```javascript
// vanilla JS
flkty.on( 'fullscreenChange', function( isFullscreen ) {...});
```

--------------------------------

### Configure accessibility

Source: https://flickity.metafizzy.co/options

Toggle keyboard navigation support. Enabled by default.

```javascript
accessibility: false
// disables being able to tab to Flickity
// and keyboard navigation
```

--------------------------------

### Handle ready event

Source: https://flickity.metafizzy.co/events

Triggered after Flickity has been activated. Bind the listener before initialization when using jQuery, or use the 'on' option in vanilla JS.

```javascript
// jQuery
var $carousel = $('.carousel');
// bind event listener first
$carousel.on( 'ready.flickity', function() {
  console.log('Flickity ready');
});
// initialize Flickity
$carousel.flickity();
```

```javascript
// vanilla JS
var flkty = new Flickity( '.carousel', {
  on: {
    ready: function() {
      console.log('Flickity ready');
    }
  }
});
```

--------------------------------

### prepend

Source: https://flickity.metafizzy.co/api

Prepend elements and create cells to the beginning of the carousel.

```APIDOC
## prepend

### Description
Prepend elements and create cells to the beginning of the carousel.

### Parameters
- **elements** (jQuery object, Array of Elements, Element, or NodeList) - Required - The elements to prepend.

### Usage
- jQuery: `$carousel.flickity( 'prepend', elements )`
- Vanilla JS: `flkty.prepend( elements )`
```

--------------------------------

### Initialize Flickity with Webpack

Source: https://flickity.metafizzy.co/extras

Require the Flickity module and initialize it on a target element.

```javascript
// main.js
var Flickity = require('flickity');

var flkty = new Flickity( '.carousel', {
  // options...
});
```

--------------------------------

### fullscreenChange

Source: https://flickity.metafizzy.co/events

Triggered after entering or exiting fullscreen view.

```APIDOC
## fullscreenChange

### Description
Triggered after entering or exiting fullscreen view.

### Parameters
- **isFullscreen** (Boolean) - true if viewing fullscreen, false if exiting fullscreen.

### Usage
```javascript
// jQuery
$carousel.on( 'fullscreenChange.flickity', function( event, isFullscreen ) {...});

// vanilla JS
flkty.on( 'fullscreenChange', function( isFullscreen ) {...});
```
```

--------------------------------

### bgLazyLoad

Source: https://flickity.metafizzy.co/events

Triggered after a background image has been loaded with bgLazyLoad.

```APIDOC
## bgLazyLoad

### Description
Triggered after a background image has been loaded with `bgLazyLoad`.

### Parameters
- **event** (Event) - Original event object.
- **element** (Element) - The element of the background image.

### Usage
```javascript
// jQuery
$carousel.on( 'bgLazyLoad.flickity', function( event, element ) {...});

// vanilla JS
flkty.on( 'bgLazyLoad', function( event, element ) {...});
```
```

--------------------------------

### Configure Attraction and Friction

Source: https://flickity.metafizzy.co/options

Adjusts slider motion physics. Higher attraction increases speed, while higher friction increases resistance.

```javascript
selectedAttraction: 0.2,
friction: 0.8
// higher attraction and higher friction
// faster transitions

```

```javascript
selectedAttraction: 0.01,
friction: 0.15
// lower attraction and lower friction
// slower transitions
// easier to flick past cells

```

--------------------------------

### select

Source: https://flickity.metafizzy.co/events

Triggered when a slide is selected.

```APIDOC
## select

### Description
Triggered when a slide is selected. This event is triggered any time a slide is selected, even if it is the same slide.

### Parameters
- **index** (Number) - Zero-based number of the selected slide.
```

--------------------------------

### viewFullscreen

Source: https://flickity.metafizzy.co/api

Expands the carousel to fullscreen mode.

```APIDOC
## viewFullscreen

### Description
Expand carousel to fullscreen. Requires the flickity-fullscreen package.

### Usage
- jQuery: `$carousel.flickity('viewFullscreen')`
- Vanilla JS: `flkty.viewFullscreen()`
```

--------------------------------

### Vanilla JS Event Binding

Source: https://flickity.metafizzy.co/events

Bind, unbind, and trigger events once using native Flickity instance methods.

```APIDOC
## Vanilla JS Event Binding

### Description
Bind events with vanilla JS using the instance methods `.on()`, `.off()`, and `.once()`.

### Usage
```javascript
// bind event listener
flkty.on( 'eventName', listener );

// unbind event listener
flkty.off( 'eventName', listener );

// bind event listener to trigger once
flkty.once( 'eventName', function() {
  console.log('eventName happened just once');
});
```
```

--------------------------------

### Configure autoPlay

Source: https://flickity.metafizzy.co/options

Automatically advance to the next cell at a set interval.

```javascript
autoPlay: true
// advance cells every 3 seconds
```

```javascript
autoPlay: 1500 // {Number}
// advance cells ever {Number} milliseconds
// 1500 will advance cells every 1.5 seconds
```

```javascript
autoPlay: 1500,
pauseAutoPlayOnHover: false
// auto play continues when user hovers over carousel
```

--------------------------------

### Bind events with jQuery

Source: https://flickity.metafizzy.co/events

Use standard jQuery methods .on(), .off(), and .one() with namespaced event names.

```javascript
// jQuery
function listener(/* parameters */) {
  console.log('eventName happened');
}
// bind event listener
$carousel.on( 'eventName.flickity', listener );
// unbind event listener
$carousel.off( 'eventName.flickity', listener );
// bind event listener to trigger once. note ONE not ON
$carousel.one( 'eventName.flickity', function() {
  console.log('eventName happened just once');
});
```

--------------------------------

### Configure bgLazyLoad range

Source: https://flickity.metafizzy.co/options

Set a numeric value to load background images in adjacent cells.

```javascript
bgLazyLoad: 1
// lazyloads background image in selected slide
// and next 1 slide
// and previous 1 slide
```

--------------------------------

### fullscreen

Source: https://flickity.metafizzy.co/options

Enables fullscreen view of the carousel.

```APIDOC
## fullscreen

### Description
Enables fullscreen view of carousel. Adds button to view and exit fullscreen. Requires the flickity-fullscreen package.

### Options
- **true** - Enable fullscreen mode.
```

--------------------------------

### Synchronize Carousels with asNavFor

Source: https://flickity.metafizzy.co/options

Links two carousels where one acts as navigation for the other. Requires the flickity-as-nav-for package.

```javascript
// asNavFor can be set a selector string
asNavFor: '.carousel-main'
// or an element
asNavFor: $('.carousel-main')[0]
asNavFor: document.querySelector('.carousel-main')

```

```javascript
// 1st carousel, main
$('.carousel-main').flickity();
// 2nd carousel, navigation
$('.carousel-nav').flickity({
  asNavFor: '.carousel-main',
  contain: true,
  pageDots: false
});

```

```css
/* is-nav-selected class added to nav cells */
.carousel-nav .carousel-cell.is-nav-selected {
  background: #ED2;
}

```

--------------------------------

### Expand to fullscreen with viewFullscreen

Source: https://flickity.metafizzy.co/api

Expands the carousel to fullscreen mode. Requires the flickity-fullscreen package.

```javascript
// jQuery
$carousel.flickity('viewFullscreen')
```

```javascript
// vanilla JS
flkty.viewFullscreen();
```

```javascript
$('.button').on( 'click', function() {
  $carousel.flickity('viewFullscreen');
});
```

--------------------------------

### Enable wrapAround

Source: https://flickity.metafizzy.co/options

Enable infinite scrolling by wrapping cells at the ends.

```javascript
wrapAround: true
```

--------------------------------

### Select a Slide

Source: https://flickity.metafizzy.co/api

Selects a specific slide by index. Use the optional parameters to enable wrapping or instant transitions.

```javascript
// jQuery
$carousel.flickity( 'select', index, isWrapped, isInstant )
```

```javascript
// vanilla JS
flkty.select( index, isWrapped, isInstant )
```

```javascript
$('.button-group').on( 'click', '.button', function() {
  var index = $(this).index();
  $carousel.flickity( 'select', index );
});
```

```javascript
// select cell instantly, without animation
$('.button-group').on( 'click', '.button', function() {
  var index = $(this).index();
  $carousel.flickity( 'select', index, false, true );
});
```

--------------------------------

### Adaptive Height with CSS Transitions

Source: https://flickity.metafizzy.co/options

Use CSS transitions for height changes, noting that this may trigger reflow and impact performance.

```javascript
adaptiveHeight: true

```

```css
.flickity-viewport {
  transition: height 0.2s;
}

```

--------------------------------

### Flickity.data

Source: https://flickity.metafizzy.co/api

Retrieves the Flickity instance via its element.

```APIDOC
## Flickity.data

### Description
Get the Flickity instance via its element. Useful for getting the Flickity instance in JavaScript after it has been initialized in HTML.

### Parameters
- `element` (Element or Selector String) - Required

### Usage
`var flkty = Flickity.data( element )`
```

--------------------------------

### Configure freeScroll behavior

Source: https://flickity.metafizzy.co/options

Enable free-scrolling without snapping to cell positions.

```javascript
freeScroll: true
```

```javascript
freeScroll: true,
contain: true,
// disable previous & next buttons and dots
prevNextButtons: false,
pageDots: false
```

```javascript
freeScroll: true,
wrapAround: true
```

--------------------------------

### bgLazyLoad

Source: https://flickity.metafizzy.co/options

Loads cell background images when a cell is selected or within a specified range.

```APIDOC
## bgLazyLoad

### Description
Loads cell background images when a cell is selected. Requires the `flickity-bg-lazyload` package.

### Configuration
- **bgLazyLoad** (boolean|number) - Set to `true` to load the background image in the selected slide, or a number to load background images in adjacent cells.

### Data Attributes
- **data-flickity-bg-lazyload** (string) - The URL of the background image to load.
```

--------------------------------

### exitFullscreen

Source: https://flickity.metafizzy.co/api

Collapses the carousel from fullscreen back to normal size.

```APIDOC
## exitFullscreen

### Description
Collapse carousel from fullscreen back to normal size & position.

### Usage
- jQuery: `$carousel.flickity('exitFullscreen')`
- Vanilla JS: `flkty.exitFullscreen()`
```

--------------------------------

### Style previous and next buttons

Source: https://flickity.metafizzy.co/style

Customize the appearance, size, and positioning of navigation buttons.

```css
/* no circle */
.flickity-button {
  background: transparent;
}
/* big previous & next buttons */
.flickity-prev-next-button {
  width: 100px;
  height: 100px;
}
/* icon color */
.flickity-button-icon {
  fill: white;
}
/* hide disabled button */
.flickity-button:disabled {
  display: none;
}
```

```css
/* smaller, dark, rounded square */
.flickity-button {
  background: #333;
}
.flickity-button:hover {
  background: #F90;
}

.flickity-prev-next-button {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}
/* icon color */
.flickity-button-icon {
  fill: white;
}
/* position outside */
.flickity-prev-next-button.previous {
  left: -40px;
}
.flickity-prev-next-button.next {
  right: -40px;
}
```

--------------------------------

### Set min-width for lazy loaded images

Source: https://flickity.metafizzy.co/options

Ensure cells maintain size before images are loaded by setting a minimum width on the image container.

```html
<div class="carousel">
  <img class="carousel-image"
    data-flickity-lazyload="tulip.jpg" />
  <img class="carousel-image"
    data-flickity-lazyload="grapes.jpg" />
  ...
</div>
```

```css
.carousel-image {
  min-width: 150px;
  height: 200px;
}
```

--------------------------------

### pointerUp

Source: https://flickity.metafizzy.co/events

Triggered when the user's pointer unpresses.

```APIDOC
## pointerUp

### Description
Triggered when the user's pointer unpresses.

### Parameters
- **event** (Event) - Original event object.
- **pointer** (Event/Touch) - The event object that has .pageX and .pageY.
```

--------------------------------

### select( index, isWrapped, isInstant )

Source: https://flickity.metafizzy.co/api

Selects a specific slide by its zero-based index.

```APIDOC
## select( index, isWrapped, isInstant )

### Description
Selects a slide by its zero-based index.

### Parameters
- **index** (Integer) - Required - Zero-based index of the slide to select.
- **isWrapped** (Boolean) - Optional - If true, the last slide will be selected if at the first slide.
- **isInstant** (Boolean) - Optional - If true, immediately view the selected slide without animation.
```

--------------------------------

### pointerMove

Source: https://flickity.metafizzy.co/events

Triggered when the user's pointer moves.

```APIDOC
## pointerMove

### Description
Triggered when the user's pointer moves.

### Parameters
- **event** (Event) - Original event object.
- **pointer** (Event/Touch) - The event object that has .pageX and .pageY.
- **moveVector** (Object) - How far the pointer has moved from its start position { x: 20, y: -30 }.
```

--------------------------------

### Flickity Instance Properties

Source: https://flickity.metafizzy.co/api

Properties are accessed directly on Flickity instances. If using jQuery, retrieve the instance via .data('flickity').

```APIDOC
## Flickity Instance Properties

### selectedIndex
Zero-based index of the selected slide.

### selectedElement
The selected cell element. For `groupCells`, the first cell element in the selected slide.

### selectedElements
An array of elements in the selected slide. Useful for `groupCells`.

### cells
The array of cells. Use `cells.length` for the total number of cells.

### slides
The array of slides. Useful for `groupCells`. A slide contains multiple cells.
```

--------------------------------

### initialIndex

Source: https://flickity.metafizzy.co/options

Sets the initial selected cell in the carousel.

```APIDOC
## initialIndex

### Description
Sets the initial selected cell. Can be a zero-based index or a selector string to match a specific cell.

### Configuration
- **initialIndex** (number|string) - Optional - The zero-based index of the cell or a selector string.
```

--------------------------------

### lazyLoad

Source: https://flickity.metafizzy.co/events

Triggered after an image has been loaded with lazyLoad.

```APIDOC
## lazyLoad

### Description
Triggered after an image has been loaded with lazyLoad. This is triggered on both valid and broken images.

### Parameters
- **event** (Event) - Original event object.
- **cellElement** (Element) - The image's cell element.
```

--------------------------------

### autoPlay

Source: https://flickity.metafizzy.co/options

Automatically advances the carousel to the next cell.

```APIDOC
## autoPlay

### Description
Automatically advances to the next cell. Auto-playing will pause when mouse is hovered over, and resume when mouse is hovered off.

### Options
- **true** - Advance cells every 3 seconds.
- **Number** - Advance cells every specified number of milliseconds.
```

--------------------------------

### append

Source: https://flickity.metafizzy.co/api

Append elements and create cells to the end of the carousel.

```APIDOC
## append

### Description
Append elements and create cells to the end of the carousel.

### Parameters
- **elements** (jQuery object, Array of Elements, Element, or NodeList) - Required - The elements to append.

### Usage
- jQuery: `$carousel.flickity( 'append', elements )`
- Vanilla JS: `flkty.append( elements )`
```

--------------------------------

### accessibility

Source: https://flickity.metafizzy.co/options

Enables or disables keyboard navigation for the carousel.

```APIDOC
## accessibility

### Description
Enable keyboard navigation. Users can tab to a Flickity carousel and use left/right keys to change cells. Enabled by default.

### Configuration
- **accessibility** (boolean) - Optional - Set to false to disable keyboard navigation.
```

--------------------------------

### unpausePlayer

Source: https://flickity.metafizzy.co/api

Resumes auto-play if it was previously paused.

```APIDOC
## unpausePlayer

### Description
Resumes auto-play if paused.

### Usage
- jQuery: `$carousel.flickity('unpausePlayer')`
- Vanilla JS: `flkty.unpausePlayer()`
```

--------------------------------

### insert

Source: https://flickity.metafizzy.co/api

Insert elements into the carousel and create cells at a specific index.

```APIDOC
## insert

### Description
Insert elements into the carousel and create cells.

### Parameters
- **elements** (jQuery object, Array of Elements, Element, or NodeList) - Required - The elements to insert.
- **index** (Integer) - Required - Zero-based index to insert elements.

### Usage
- jQuery: `$carousel.flickity( 'insert', elements, index )`
- Vanilla JS: `flkty.insert( elements, index )`
```

--------------------------------

### Implement custom carousel navigation UI

Source: https://flickity.metafizzy.co/extras

Uses the Flickity API to synchronize external buttons with carousel state and trigger navigation actions.

```javascript
// init Flickity
var $carousel = $('.carousel').flickity({
  prevNextButtons: false,
  pageDots: false
});
// Flickity instance
var flkty = $carousel.data('flickity');
// elements
var $cellButtonGroup = $('.button-group--cells');
var $cellButtons = $cellButtonGroup.find('.button');

// update selected cellButtons
$carousel.on( 'select.flickity', function() {
  $cellButtons.filter('.is-selected')
    .removeClass('is-selected');
  $cellButtons.eq( flkty.selectedIndex )
    .addClass('is-selected');
});

// select cell on button click
$cellButtonGroup.on( 'click', '.button', function() {
  var index = $(this).index();
  $carousel.flickity( 'select', index );
});
// previous
$('.button--previous').on( 'click', function() {
  $carousel.flickity('previous');
});
// next
$('.button--next').on( 'click', function() {
  $carousel.flickity('next');
});
```

--------------------------------

### Handle pointerMove event

Source: https://flickity.metafizzy.co/events

Triggered when the user's pointer moves.

```javascript
// jQuery
$carousel.on( 'pointerMove.flickity', function( event, pointer, moveVector ) {...});
```

```javascript
// vanilla JS
flkty.on( 'pointerMove', function( event, pointer, moveVector ) {...});
```

--------------------------------

### pausePlayer

Source: https://flickity.metafizzy.co/api

Pauses the auto-play functionality.

```APIDOC
## pausePlayer

### Description
Pauses auto-play.

### Usage
- jQuery: `$carousel.flickity('pausePlayer')`
- Vanilla JS: `flkty.pausePlayer()`
```

--------------------------------

### next( isWrapped, isInstant )

Source: https://flickity.metafizzy.co/api

Selects the next slide in the carousel.

```APIDOC
## next( isWrapped, isInstant )

### Description
Selects the next slide.

### Parameters
- **isWrapped** (Boolean) - Optional - If true, the first slide will be selected if at the last slide.
- **isInstant** (Boolean) - Optional - If true, immediately view the selected slide without animation.
```

--------------------------------

### Style lazy loaded images

Source: https://flickity.metafizzy.co/options

Use the flickity-lazyloaded class to apply transitions or styles once an image has finished loading.

```css
/* fade in image when loaded */
.carousel-cell-image {
  transition: opacity 0.4s;
  opacity: 0;
}

.carousel-cell-image.flickity-lazyloaded,
.carousel-cell-image.flickity-lazyerror {
  opacity: 1;
}
```

--------------------------------

### Configure Free Scroll Friction

Source: https://flickity.metafizzy.co/options

Controls the friction specifically when freeScroll is enabled.

```javascript
freeScroll: true,
freeScrollFriction: 0.03
// lower friction, slides easier

```

--------------------------------

### Handle pointerUp event

Source: https://flickity.metafizzy.co/events

Triggered when the user's pointer unpresses.

```javascript
// jQuery
$carousel.on( 'pointerUp.flickity', function( event, pointer ) {...});
```

```javascript
// vanilla JS
flkty.on( 'pointerUp', function( event, pointer ) {...});
```

--------------------------------

### Flickity.setJQuery

Source: https://flickity.metafizzy.co/api

Sets jQuery for internal use in Flickity.

```APIDOC
## Flickity.setJQuery

### Description
Set jQuery for internal use in Flickity. Useful for using Flickity with jQuery and Webpack or Browserify.

### Parameters
- `$` (jQuery) - Required

### Usage
`Flickity.setJQuery( $ )`
```

--------------------------------

### lazyLoad

Source: https://flickity.metafizzy.co/options

Loads cell images when a cell is selected or within a specified range of the selected cell.

```APIDOC
## lazyLoad

### Description
Loads cell images when a cell is selected. Supports `src` and `srcset` via data attributes.

### Configuration
- **lazyLoad** (boolean|number) - Set to `true` to load the image in the selected slide, or a number to load images in adjacent cells (e.g., `2` loads the selected slide plus 2 slides before and after).

### Data Attributes
- **data-flickity-lazyload** (string) - The URL of the image to load.
- **data-flickity-lazyload-src** (string) - Optional placeholder or source for browsers not supporting `srcset`.
- **data-flickity-lazyload-srcset** (string) - The `srcset` value for responsive images.
```

--------------------------------

### pointerDown

Source: https://flickity.metafizzy.co/events

Triggered when the user's pointer (mouse, touch, pointer) presses down.

```APIDOC
## pointerDown

### Description
Triggered when the user's pointer (mouse, touch, pointer) presses down.

### Parameters
- **event** (Event) - Original event object.
- **pointer** (Event/Touch) - The event object that has .pageX and .pageY.
```

--------------------------------

### Integrate Flickity as a jQuery Plugin with Webpack

Source: https://flickity.metafizzy.co/extras

Use jquery-bridget to expose Flickity as a jQuery plugin within a Webpack environment.

```bash
npm install jquery-bridget
```

```javascript
var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Flickity = require('flickity');

// make Flickity a jQuery plugin
Flickity.setJQuery( $ );
jQueryBridget( 'flickity', Flickity, $ );
// now you can use $().flickity()
var $carousel = $('.carousel').flickity({...});
```

--------------------------------

### toggleFullscreen

Source: https://flickity.metafizzy.co/api

Toggles the carousel between fullscreen and normal view.

```APIDOC
## toggleFullscreen

### Description
Expand or collapse carousel fullscreen view.

### Usage
- jQuery: `$carousel.flickity('toggleFullscreen')`
- Vanilla JS: `flkty.toggleFullscreen()`
```

--------------------------------

### change

Source: https://flickity.metafizzy.co/events

Triggered when the selected slide is changed.

```APIDOC
## change

### Description
Triggered when the selected slide is changed.

### Parameters
- **index** (Number) - Zero-based number of the selected slide.
```

--------------------------------

### Configure percent positioning

Source: https://flickity.metafizzy.co/options

Determines whether cell positions are calculated in percentages or pixels.

```javascript
// default percentPosition: true
// sets cell position in percentages
```

```css
/* cell width in percent */
.carousel-cell {
  width: 66%;
}
```

```javascript
percentPosition: false
// sets cell position in pixels
```

```css
/* cell width in pixels */
.carousel-cell {
  width: 300px;
}
```

--------------------------------

### previous( isWrapped, isInstant )

Source: https://flickity.metafizzy.co/api

Selects the previous slide in the carousel.

```APIDOC
## previous( isWrapped, isInstant )

### Description
Selects the previous slide.

### Parameters
- **isWrapped** (Boolean) - Optional - If true, the last slide will be selected if at the first slide.
- **isInstant** (Boolean) - Optional - If true, immediately view the selected slide without animation.
```

--------------------------------

### Set jQuery for Flickity

Source: https://flickity.metafizzy.co/api

Configures the jQuery instance for internal use, typically required when using module bundlers like Webpack or Browserify.

```javascript
Flickity.setJQuery( $ )
```

```javascript
var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Flickity = require('flickity');

// make Flickity a jQuery plugin
Flickity.setJQuery( $ );
jQueryBridget( 'flickity', Flickity, $ );
// now you can use $().flickity()
var $carousel = $('.carousel').flickity({...});
```

--------------------------------

### Configure groupCells

Source: https://flickity.metafizzy.co/options

Group multiple cells into a single slide.

```javascript
groupCells: true
// if set to true,
// group cells that fit in carousel viewport
```

```javascript
groupCells: 2
// if set to a number, group cells by that number
```

```javascript
groupCells: '80%'
// if set to a percent string,
// group cells that fit in the percent of
// the width of the carousel viewport
```

--------------------------------

### dragEnd

Source: https://flickity.metafizzy.co/events

Triggered when dragging ends.

```APIDOC
## dragEnd

### Description
Triggered when dragging ends.

### Parameters
- **event** (Event) - Original event object.
- **pointer** (Event/Touch) - The event object that has .pageX and .pageY.
```

--------------------------------

### Handle pointerDown event

Source: https://flickity.metafizzy.co/events

Triggered when the user's pointer presses down.

```javascript
// jQuery
$carousel.on( 'pointerDown.flickity', function( event, pointer ) {...});
```

```javascript
// vanilla JS
flkty.on( 'pointerDown', function( event, pointer ) {...});
```

--------------------------------

### Prepend cells

Source: https://flickity.metafizzy.co/api

Prepend elements and create cells to the beginning of the carousel.

```javascript
// jQuery
$carousel.flickity( 'prepend', elements )
```

```javascript
// vanilla JS
flkty.prepend( elements )
```

```javascript
$('.button').on( 'click', function() {
  var $cellElems = $('<div class="carousel-cell">...</div>');
  $carousel.flickity( 'prepend', $cellElems );
});
```

--------------------------------

### destroy

Source: https://flickity.metafizzy.co/api

Removes Flickity functionality completely and returns the element to its pre-initialized state.

```APIDOC
## destroy

### Description
Remove Flickity functionality completely. `destroy` will return the element back to its pre-initialized state.

### Usage
- jQuery: `$carousel.flickity('destroy')`
- Vanilla JS: `flkty.destroy()`
```

--------------------------------

### Style button focus state

Source: https://flickity.metafizzy.co/style

Define the visual indicator for focused navigation buttons.

```css
/* already included in flickity.css */
.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}
```

--------------------------------

### Enable right-to-left layout

Source: https://flickity.metafizzy.co/options

Switches the carousel layout to right-to-left mode.

```javascript
rightToLeft: true
```

--------------------------------

### Configure Drag Threshold

Source: https://flickity.metafizzy.co/options

Sets the pixel distance required before a drag action initiates, useful for improving touch device scrolling.

```javascript
dragThreshold: 10
// dragging doesn't start until 10px moved
// more room for vertical scrolling
// on touch devices

```
Tokens:
Raw