### RequireJS Basic Setup for Flickity

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

Demonstrates how to initialize Flickity using RequireJS by requiring the `flickity.pkgd.js` file. This is the fundamental setup for using Flickity within a RequireJS module system.

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

```

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

### Install Flickity with npm

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

This command installs the Flickity library using npm, a popular package manager for Node.js. It's a prerequisite for using Flickity in a project managed with npm.

```bash
npm install flickity

```

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

### RequireJS Setup with Flickity Add-ons

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

Shows how to load and initialize Flickity with multiple add-on features such as `imagesLoaded`, `fullscreen`, and `bgLazyLoad` using RequireJS. This allows for enhanced functionality within the carousel.

```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,
  });
});

```

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

### Flickity carousel with initial selection via selector

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

An example HTML structure for a Flickity carousel where one of the cells has the class `is-initial-select`. This class would be used with the `initialIndex` option to set that specific cell as the starting slide.

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

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

### Install Flickity Add-ons with npm

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

These commands install additional Flickity add-on packages, specifically 'flickity-imagesloaded' and 'flickity-fullscreen', using npm. These add-ons provide enhanced functionality for image loading and fullscreen display within carousels.

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

```

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

### Configure Flickity lazyLoad with srcset and data-flickity-lazyload-src

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

This example demonstrates using `data-flickity-lazyload-srcset` for responsive images and `data-flickity-lazyload-src` as a fallback for browsers that do not support `srcset`. It allows for optimized image loading based on screen size.

```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"
  />
```

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

### Use Flickity as jQuery Plugin with Webpack

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

This snippet details the setup required to use Flickity as a jQuery plugin within a Webpack project. It involves installing 'jquery-bridget', setting jQuery for Flickity, and then using the '$().flickity()' syntax. Dependencies include jQuery, jQuery-bridget, and Flickity.

```javascript
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({...});

```

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

### Listen for Flickity 'ready' Event

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

Examples for binding to the 'ready' event, which is triggered after Flickity has been fully activated. For jQuery, the event listener should be bound before initialization. For vanilla JS, it's best handled within the 'on' option during initialization.

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

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

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

### Enable bgLazyLoad in Flickity

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

Enables the lazy loading of background images for Flickity cells. This option requires the `flickity-bg-lazyload` package, which must be installed separately. Images are loaded when their corresponding cells become active.

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

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

### Require Flickity in Webpack

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

This JavaScript code demonstrates how to import and initialize Flickity within a Webpack project. It shows the basic instantiation of a Flickity carousel using its module. Requires Flickity to be installed via npm.

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

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

```

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

### Control Carousel Autoplay: Play

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

The `playPlayer` method starts the carousel's auto-play functionality. Note that if `autoPlay` is set during initialization, auto-play starts automatically, making `playPlayer` redundant in that scenario.

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

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

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

### Toggle Flickity Initialization/Destruction (jQuery)

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

This example demonstrates how to toggle Flickity functionality on and off for a carousel element. It checks the current state and either destroys or reinitializes Flickity accordingly.

```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;
});
```

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

### Flickity carousel with background images for lazy loading

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

A Flickity carousel example where cells use the `data-flickity-bg-lazyload` attribute to specify background images for lazy loading. This is suitable for creating galleries or sliders with background image content.

```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>
```

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

### Require Flickity Add-ons in Webpack

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

This code shows how to require Flickity and its add-ons (imagesLoaded, fullscreen) in a Webpack project. It then initializes a Flickity instance with options to enable these features. Requires Flickity and its add-ons to be installed via npm.

```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,
});

```

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

### Navigate to Previous/Next Slide in Flickity (jQuery & Vanilla JS)

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

Provides code examples for navigating to the previous or next slide in a Flickity carousel. It covers options for wrapping around and instant selection, with distinct implementations for jQuery and vanilla JavaScript.

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

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

```javascript
// previous
$('.button--previous').on( 'click', function() {
  $carousel.flickity('previous');
});
// previous wrapped
$('.button--previous-wrapped').on( 'click', function() {
  $carousel.flickity( 'previous', true );
});
```

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

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

```javascript
// next
$('.button--next').on( 'click', function() {
  $carousel.flickity('next');
});
// next wrapped
$('.button--next-wrapped').on( 'click', function() {
  $carousel.flickity( 'next', true );
});
```

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

### Set jQuery for Flickity (Webpack/Browserify)

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

Configures Flickity to use a specific jQuery instance, which is essential when bundling with tools like Webpack or Browserify. This allows Flickity to be used as a jQuery plugin after correct setup.

```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({...});
```

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

### Trigger Flickity Drag Start Event

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

The 'dragStart.flickity' event is fired when the user begins dragging the carousel slider. It provides the original event object and a pointer object containing pageX and pageY coordinates.

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

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

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

### Fullscreen Carousel with Lazy Loading Images

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

Demonstrates enabling fullscreen mode with lazy loading for images. This example uses CSS with flexbox to center images within cells when in fullscreen mode, suitable for image galleries.

```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>
  ...
</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%;
}
```

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

### Listen for Flickity 'change' Event

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

Demonstrates how to capture the 'change' event, which fires whenever the selected slide is updated. It provides the zero-based index of the new selected slide. Examples are shown for both jQuery and vanilla JavaScript.

```jquery
// jQuery
$carousel.on( 'change.flickity', function( event, index ) {
  console.log( 'Slide changed to ' + index )
});
```

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

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

### Listen for Flickity 'select' Event

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

Provides code examples for the 'select' event, which is triggered any time a slide is selected, even if it's the same slide multiple times. This differs from the 'change' event, which only fires for different slides. Includes jQuery and vanilla JS implementations.

```jquery
// jQuery
$carousel.on( 'select.flickity', function( event, index ) {
  console.log( 'Flickity select ' + index )
});
```

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

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

### Listen for Flickity 'settle' Event

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

Shows how to bind to the 'settle' event, which is triggered when the slider has finished moving and has settled at its final position. The event provides the index of the settled slide. Examples are given for both jQuery and vanilla JavaScript.

```jquery
// jQuery
$carousel.on( 'settle.flickity', function( event, index ) {
  console.log( 'Flickity settled at ' + index );
});
```

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

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

### Flickity carousel with mixed cell and static elements

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

An example of a Flickity carousel structure that includes static banner elements alongside the actual carousel cells. The `cellSelector` option would typically be used here to differentiate between cells and other content.

```html
<div class="carousel">
  <div class="static-banner">Static banner 1</div>
  <div class="static-banner">Static banner 2</div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  ...
</div>
```

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

### Resize Flickity Carousel (jQuery & Vanilla JS)

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

Explains how to resize a Flickity carousel to adjust its layout, typically after changes to its container or visibility. Examples are provided for both jQuery and vanilla JavaScript, including use cases for dynamically showing hidden carousels.

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

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

```javascript
$carousel.toggleClass('is-expanded')
  .flickity('resize');
```

```javascript
$carousel.show()
  // resize after un-hiding Flickity
  .flickity('resize');
```

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

### Get Flickity Cell Elements (jQuery & Vanilla JS)

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

Retrieves an array of the cell elements within the Flickity slider. This can be used for further manipulation or inspection of individual cells. Available for both jQuery and vanilla JS.

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

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

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

### Select a Flickity Carousel Slide (jQuery & Vanilla JS)

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

Shows how to select a specific slide in a Flickity carousel by its index. It includes options for wrapping around and performing the selection instantly without animation. Examples are provided for both jQuery and vanilla JavaScript.

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

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

```javascript
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 );
});
```

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

### Implement Parallax Layers with Flickity Scroll

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

This example shows how to create parallax effects for background and foreground layers within a Flickity carousel using the 'scroll.flickity' event. It defines ratios for different layers and uses a helper function to position them based on scroll progress.

```jQuery
var cellRatio = 0.6; // outerWidth of cell / width of carousel
var bgRatio = 0.8; // width of background layer / width of carousel
var fgRatio = 1.25; // width of foreground layer / width of carousel

$carousel.on( 'scroll.flickity', function( event, progress ) {
  moveParallaxLayer( $background, bgRatio, progress );
  moveParallaxLayer( $foreground, fgRatio, progress );
});
// trigger initial scroll
$carousel.flickity('reposition');

var flkty = $carousel.data('flickity');
var count = flkty.slides.length - 1;

function moveParallaxLayer( $layer, layerRatio, progress ) {
  var ratio = cellRatio * layerRatio;
  $layer.css({
    left: ( 0.5 - ( 0.5 + progress * count ) * ratio ) * 100 + '%' 
  });
}
```

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

### Get Flickity Instance from jQuery Object

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

Retrieves the Flickity instance associated with a jQuery object. This allows access to Flickity's properties and methods directly from the jQuery selection. Useful for inspecting properties like `selectedIndex`.

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

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

### Prepend Cells to Carousel

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

The `prepend` method adds new cells to the beginning of the carousel. It accepts various element types, including jQuery objects, arrays of Elements, single Elements, or NodeLists. This is useful for adding content dynamically at the start.

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

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

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

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

### Get Flickity Instance from Element (Vanilla JS & Selector)

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

Retrieves the Flickity instance associated with a DOM element or a selector string. This is particularly useful when Flickity is initialized directly in HTML using the `data-flickity` attribute. Supports vanilla JS and selector strings.

```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')
```

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

### Select Flickity Cell by Index or Selector (jQuery & Vanilla JS)

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

Demonstrates how to select a specific cell within a Flickity carousel using either its zero-based index or a CSS selector. Options for wrapping and instant selection are also included, with examples for both jQuery and vanilla JavaScript.

```javascript
// jQuery
$carousel.flickity( 'selectCell', value, isWrapped, isInstant )
```

```javascript
// vanilla JS
flkty.selectCell( value, isWrapped, isInstant )
```

```javascript
$carousel.flickity( 'selectCell', '.cell2' );
```

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

### Browserify Build Command

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

This command bundles JavaScript modules using Browserify. It takes 'main.js' as the entry point and outputs the bundled code to 'bundle.js'. This is an alternative to Webpack for module bundling.

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

```

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

### Flickity Methods Overview

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

Explains how to use Flickity methods with both jQuery and vanilla JavaScript, demonstrating method chaining and direct method calls.

```APIDOC
## Flickity Methods

Methods are actions performed by Flickity instances.

### jQuery Usage
Methods follow the jQuery UI pattern `$carousel.flickity('methodName', /* arguments */)`.

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

Note: jQuery chaining is broken by methods that return values, such as `getCellElements`.

### Vanilla JavaScript Usage
Vanilla JavaScript methods are called directly on the Flickity instance: `flickity.methodName(/* arguments */)`.

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

Note: Unlike jQuery methods, vanilla JS methods cannot be chained together.
```

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

### Webpack Build Command

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

This command executes the Webpack build process, taking the main JavaScript file ('main.js') as input and outputting a bundled JavaScript file ('bundle.js'). This is used to compile and package JavaScript modules.

```bash
webpack main.js bundle.js

```

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

### Initialize Flickity with Vanilla JavaScript

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

This snippet illustrates initializing Flickity using plain JavaScript. It involves selecting the carousel element (either directly or via a selector string) and creating a new `Flickity` instance, passing the element and an optional configuration object.

```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
});
```

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

### RequireJS Config with Package Managers

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

Demonstrates configuring RequireJS to use packages from `node_modules` for Flickity and application code. This approach simplifies dependency management when using npm or Bower.

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

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

```

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

### RequireJS jQuery Plugin with Package Managers

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

Shows how to configure RequireJS with package managers to use Flickity as a jQuery plugin. It includes setting up paths for jQuery and `jquery-bridget`, and then initializing Flickity using `$().flickity()`.

```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({...});
});

```

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

### Initialize and Control Flickity Carousel (jQuery & Vanilla JS)

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

Demonstrates how to initialize a Flickity carousel and call various methods like 'next' and 'select' using both jQuery and vanilla JavaScript syntax. Note that jQuery methods can be chained, while vanilla JS methods cannot.

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

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

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

### Sizing and Positioning API

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

Documentation for methods related to resizing and repositioning carousel elements.

```APIDOC
## Sizing and Positioning

### `resize`

Resize the carousel and re-position cells. This is particularly useful when the carousel's visibility or dimensions change after initialization.

#### jQuery
```javascript
$carousel.flickity('resize')
```

#### Vanilla JS
```javascript
flkty.resize()
```

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

**Example Usage (After Showing Hidden Carousel):**
If Flickity is initialized when hidden (e.g., within a tab), trigger `resize` after it is shown so cells are properly measured and positioned.
```javascript
$('.button').on( 'click', function() {
  $carousel.show()
    // resize after un-hiding Flickity
    .flickity('resize');
});
```
```

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

### Configure Flickity lazyLoad with data-flickity-lazyload

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

The `lazyLoad` option defers loading of cell images until a cell is selected. Image sources can be specified using `data-flickity-lazyload` or `data-flickity-lazyload-src` attributes on the `<img>` tag. A placeholder `src` can also be set.

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

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

### Initialize Flickity with Event Listeners using 'on' Option

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

Shows how to bind event listeners directly within Flickity's initialization options using the 'on' object. This is particularly useful for capturing events like 'ready' immediately upon initialization. Works with both jQuery and vanilla JavaScript.

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

```vanilla 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 );
    }
  }
});
```

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

### Basic Flickity carousel with lazyLoad images

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

A basic HTML structure for a Flickity carousel where images use the `data-flickity-lazyload` attribute for lazy loading. This allows the carousel to render quickly by deferring image loading.

```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>
```

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

### CSS for Flickity lazy loaded image transitions

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

Provides CSS styles to create a fade-in transition for images when they are successfully loaded by Flickity's lazy loading feature. It adds a visual cue for image loading completion using `.flickity-lazyloaded` and error states with `.flickity-lazyerror`.

```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;
}
```

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

### Initialize Flickity with jQuery

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

This code snippet shows how to initialize Flickity as a jQuery plugin. It selects the carousel container element using a jQuery selector and calls the `.flickity()` method, optionally passing a configuration object with desired options.

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

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

### Configure Flickity bgLazyLoad with data-flickity-bg-lazyload

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

The `bgLazyLoad` option defers loading of background images for cells until the cell is selected. The image URL is specified using the `data-flickity-bg-lazyload` attribute.

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

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

### RequireJS Flickity as jQuery Plugin with Bridget

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

Illustrates how to use Flickity as a jQuery plugin with RequireJS. It involves requiring `jquery-bridget` and then using `jQueryBridget` to enable `$().flickity()` initialization.

```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({...});
    }
  );
});

```

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

### Trigger Flickity Scroll Event

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

The 'scroll.flickity' event is triggered whenever the carousel slider moves. It provides a progress value indicating how far the slider has moved, from 0 (start) to 1 (end). This can be used for various effects like progress bars or parallax.

```jQuery
$carousel.on( 'scroll.flickity', function( event, progress ) {
  console.log( 'Flickity scrolled ' + progress * 100 + '%' )
});
```

```vanilla JS
flkty.on( 'scroll', function( progress ) {...});
```

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

### Selecting Slides API

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

Documentation for methods used to select specific slides within a Flickity carousel.

```APIDOC
## Selecting Slides

### `select`

Select a slide by its index.

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

#### Vanilla JS
```javascript
flkty.select( index, isWrapped, isInstant )
```

**Parameters:**
*   `index` (Integer) - 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) - If `true`, immediately view the selected slide without animation.

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

**Example Usage (Instant Select):**
```javascript
$('.button-group').on( 'click', '.button', function() {
  var index = $(this).index();
  $carousel.flickity( 'select', index, false, true );
});
```

### `previous`

Select the previous slide.

#### jQuery
```javascript
$carousel.flickity( 'previous', isWrapped, isInstant )
```

#### Vanilla JS
```javascript
flkty.previous( isWrapped, isInstant )
```

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

**Example Usage:**
```javascript
// Previous slide
$('.button--previous').on( 'click', function() {
  $carousel.flickity('previous');
});

// Previous slide with wrapping
$('.button--previous-wrapped').on( 'click', function() {
  $carousel.flickity( 'previous', true );
});
```

### `next`

Select the next slide.

#### jQuery
```javascript
$carousel.flickity( 'next', isWrapped, isInstant )
```

#### Vanilla JS
```javascript
flkty.next( isWrapped, isInstant )
```

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

**Example Usage:**
```javascript
// Next slide
$('.button--next').on( 'click', function() {
  $carousel.flickity('next');
});

// Next slide with wrapping
$('.button--next-wrapped').on( 'click', function() {
  $carousel.flickity( 'next', true );
});
```

### `selectCell`

Select a slide of a cell. Useful for `groupCells`.

#### jQuery
```javascript
$carousel.flickity( 'selectCell', value, isWrapped, isInstant )
```

#### Vanilla JS
```javascript
flkty.selectCell( value, isWrapped, isInstant )
```

**Parameters:**
*   `value` (Integer or String) - Zero-based index OR selector string of the cell to select.
*   `isWrapped` (Boolean, Optional) - If `true`, the last slide will be selected if at the first slide.
*   `isInstant` (Boolean) - If `true`, immediately view the selected slide without animation.

**Example Usage (by index):**
```javascript
$('.button-group').on( 'click', '.button', function() {
  var index = $(this).index();
  $carousel.flickity( 'selectCell', index );
});
```

**Example Usage (by selector):**
```javascript
$carousel.flickity( 'selectCell', '.cell2' );
```
```

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

### Enter Fullscreen View

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

The `viewFullscreen` method expands the carousel to fill the entire screen. This functionality requires the separate `flickity-fullscreen` package and is not included in the default `flickity.pkgd.js`.

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

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

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

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

### Synchronize Flickity Carousels with asNavFor

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

Links one Flickity carousel to another, allowing them to act as navigation. Clicking a navigation cell selects the corresponding main carousel cell, and vice-versa. Requires the 'flickity-as-nav-for' package if not using flickity.pkgd.js.

```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;
}

```

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

### Enable Hash Navigation in Flickity

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

Enables slide selection via URL hash fragments. Clicking a link with a cell's ID will navigate to that slide and update the URL. Requires the separate '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>

```

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

### Flickity.setJQuery()

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

Sets the jQuery instance for Flickity's internal use, essential when integrating with module bundlers like Webpack or Browserify.

```APIDOC
## Flickity.setJQuery()

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

### Method
Static Method

### Endpoint
N/A (Static Method)

### Parameters
#### Path Parameters
- **$** (jQuery) - The jQuery object instance.

### Request Example
```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({...});
```

### Response
N/A (Sets internal configuration)
```

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

### Flickity Properties

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

Properties provide access to the current state and data of a Flickity instance.

```APIDOC
## Flickity Properties

### Description
Properties are accessed only on Flickity instances. If you initialized Flickity with jQuery, use `.data('flickity')` to get the instance.

### Method
Instance Properties

### Endpoint
N/A (Instance Properties)

### Parameters
None

### Request Example
```javascript
// init Flickity with jQuery
var $carousel = $('.carousel').flickity();
// get instance
var flkty = $carousel.data('flickity');
// access properties
console.log( flkty.selectedIndex, flkty.selectedElement );
```

### SelectedIndex
Zero-based index of the selected slide.
```
flkty.selectedIndex
```

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

### SelectedElements
An array of elements in the selected slide. Useful for `groupCells`.
```
flkty.selectedElements
// -> array of elements
```

### Cells
The array of cells. Use `cells.length` for the total number of cells.
```
flkty.cells
// -> array of cells
flkty.cells.length
// -> total number of cells
```

### Slides
The array of slides. Useful for `groupCells`. A slide contains multiple cells. If `groupCells` is disabled, then each slide is a cell, so they are one in the same.
```
flkty.slides
// -> array of slides
flkty.slides.length
// -> total number of slides
```
```

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

### Include Flickity JavaScript via CDN

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

This snippet demonstrates including the Flickity JavaScript file via a CDN link. This script is necessary for the carousel functionality to work. It should be included after the CSS.

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

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

### Bind, Unbind, and One-time Event Listeners with jQuery and Vanilla JS

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

Demonstrates how to bind, unbind, and set up one-time event listeners for Flickity events using both jQuery's .on(), .off(), .one() methods and vanilla JavaScript's .on(), .off(), .once() methods. Event names are namespaced with '.flickity' for jQuery.

```jquery
// 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');
});
```

```vanilla 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');
});
```

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

### Access Flickity Instance Properties (selectedIndex, selectedElement)

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

Demonstrates how to access Flickity instance properties like `selectedIndex` and `selectedElement`. This is done by first retrieving the Flickity instance, typically using `.data('flickity')` if initialized with jQuery.

```javascript
// init Flickity with jQuery
var $carousel = $('.carousel').flickity();
// get instance
var flkty = $carousel.data('flickity');
// access properties
console.log( flkty.selectedIndex, flkty.selectedElement );
```

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

### Initialize Flickity with HTML Data Attributes

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

This method initializes Flickity directly within the HTML markup by adding a `data-flickity` attribute to the carousel container. The attribute's value should be a valid JSON string containing the desired options for the carousel.

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

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

### Include Flickity CSS via CDN

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

This snippet shows how to include the Flickity CSS file using a CDN link. It's essential for styling the carousel elements correctly. No JavaScript dependencies are required for this part.

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

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

### Set Flickity bgLazyLoad to load adjacent background images

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

Configures `bgLazyLoad` to a numerical value, enabling the loading of background images not only in the selected cell but also in adjacent cells. This preloads background images for a smoother visual transition during navigation.

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

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

### Flickity v2 jQuery Event Namespacing

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

Illustrates the change in jQuery event handling from Flickity v1 to v2. In v2, events must be namespaced with `.flickity`, such as `staticClick.flickity`, to function correctly.

```javascript
// v1, will not work with v2
$carousel.on( 'staticClick', function() {})
// v2, add .flickity namespace
$carousel.on( 'staticClick.flickity', function() {})

```

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

### Configure Flickity Fullscreen Option

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

Enables a fullscreen view for the carousel, requiring the 'flickity-fullscreen' package. This option adds a button to enter and exit fullscreen mode. CSS is provided to style cells in fullscreen view, ensuring they occupy the full height.

```javascript
fullscreen: true
```

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

### Control Flickity with CSS :after pseudo-element

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

Allows enabling or disabling Flickity using the :after pseudo-element's content. Flickity is enabled when the content is 'flickity', and disabled when it's empty. This is useful for responsive design.

```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: '';
  }
}

```

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

### Enable lazyLoad in Flickity

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

Enables the lazy loading of images within Flickity cells. Images will only be loaded when their respective cells become active or adjacent, improving initial page load performance.

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

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

### Set initialIndex using a selector for Flickity carousel

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

Allows setting the `initialIndex` for a Flickity carousel using a CSS selector. The carousel will initialize with the cell matching the provided selector as the initially selected slide.

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

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

### Enable Fade Transition in Flickity

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

Enables a fade transition between slides instead of the default movement. Requires the separate 'flickity-fade' package.

```javascript
fade: true

```