Foundation
Jump to Nav

# Flickity

JavaScript TBG

Alternative carousel to Foundation's Orbit

## Basics

This plugin requires the Flickity plugin, created and maintained by MetaFizzy.

Flickity options can be set by setting the `data-flickity` as a valid JSON object of values, or setting each option as a data attribute with the relevant value per the convention found in other Foundation plugins.

Please refer to the Flickity docs for the complete list of options.

Just like Orbit, Flickity affords a great deal of leeway as far as the contents of each slide is concerned. We use the `aria-label` attribute to label what the carousel is, for assistive technology.

    <div class="flickity" role="region" aria-label="Favorite Space Pictures" data-flickity-carousel data-prev-next-buttons="true" data-page-dots="true">
      <div class="flickity-slide">
        <img class="flickity-image" src="assets/img/orbit/01.jpg" alt="Space">
        <figcaption class="flickity-caption">Space, the final frontier.</figcaption>
      </div>
      <div class="flickity-slide">
        <img class="flickity-image" src="assets/img/orbit/02.jpg" alt="Space">
        <figcaption class="flickity-caption">Lets Rocket!</figcaption>
      </div>
      <div class="flickity-slide">
        <img class="flickity-image" src="assets/img/orbit/03.jpg" alt="Space">
        <figcaption class="flickity-caption">Encapsulating</figcaption>
      </div>
      <div class="flickity-slide">
        <img class="flickity-image" src="assets/img/orbit/04.jpg" alt="Space">
        <figcaption class="flickity-caption">Outta This World</figcaption>
      </div>
    </div>

Space, the final frontier.
Lets Rocket!
Encapsulating
Outta This World

### Horizontal scrolling with mouse wheel support

For desktop users, using the trackpad or mouse wheel to navigate carousels can be convenient. To enable support for this, set the value of the `data-horizontal-scrolling` attribute to "true"

Requires the jquery-mousewheel plugin.

    <div class="flickity" role="region" aria-label="Favorite Space Pictures" data-flickity-carousel data-horizontal-scrolling="true">
      <div class="flickity-slide">
        <img class="flickity-image" src="assets/img/orbit/04.jpg" alt="Space">
        <figcaption class="flickity-caption">Space, the final frontier.</figcaption>
      </div>
      <div class="flickity-slide">
        <img class="flickity-image" src="assets/img/orbit/03.jpg" alt="Space">
        <figcaption class="flickity-caption">Lets Rocket!</figcaption>
      </div>
    </div>

Space, the final frontier.
Lets Rocket!

### Disable or enable Flickity at a media query breakpoint

To disable Flickity when the window expands to a certain media query, use the `data-disable-breakpoint` attribute with the breakpoint name as the value.

To enable Flickity when the window expands to a certain media query, use the `data-enable-breakpoint` attribute with the breakpoint name as the value.

Be careful when using both options simultaneously! You probably don't have to.

You can read more about how Foundation works with media queries here.

    <div class="flickity" role="region" aria-label="Favorite Space Pictures" data-flickity-carousel data-prev-next-buttons="true" data-disable-breakpoint="medium">
      <div class="flickity-slide">
        <img class="flickity-image" src="assets/img/orbit/02.jpg" alt="Space">
        <figcaption class="flickity-caption">Space, the final frontier.</figcaption>
      </div>
      <div class="flickity-slide">
        <img class="flickity-image" src="assets/img/orbit/01.jpg" alt="Space">
        <figcaption class="flickity-caption">Lets Rocket!</figcaption>
      </div>
    </div>

Space, the final frontier.
Lets Rocket!

## Sass Reference

### Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name | Type | Default Value | Description
--- | --- | --- | ---
`$flickity-viewport-class` | String | `'.flickity-viewport'` | Default Flickity viewport class
`$flickity-slide-class` | String | `'.flickity-slide'` | Default Flickity slide class
`$flickity-rtl-class` | String | `'.flickity-rtl'` | Default Flickity right-to-left class
`$flickity-arrow-class` | String | `'.arrow'` | Default Flickity arrow class
`$flickity-dot-class` | String | `'.dot'` | Default Flickity dot class
`$flickity-prev-button-class` | String | `'.previous'` | Default Flickity previous button class
`$flickity-next-button-class` | String | `'.next'` | Default Flickity next button class
`$flickity-slide-width` | Color | `100%` | Default focus outline color for Flickity's bullets.
`$flickity-bullet-background` | Color | `hsla(0, 0%, 100%, 0.75)` | Default color for Flickity's bullets.
`$flickity-bullet-background-active` | Color | `$light-gray` | Default active color for Flickity's bullets.
`$flickity-bullet-focus` | Color | `#09f` | Default focus outline color for Flickity's bullets.

### Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

#### flickity-enabled

    @include flickity-enabled;

Adds styles for the outer Flickity wrapper. These styles are used on the `.flickity-enabled` class.

#### flickity-viewport

    @include flickity-viewport;

Adds styles for the Flickity viewport wrapper. These styles are used on the `.flickity-viewport` class.

#### flickity-slider

    @include flickity-slider;

Adds styles for the Flickity slider wrapper. These styles are used on the `.flickity-slider` class.

#### flickity-slide

    @include flickity-slide;

Adds styles for the Flickity slide. These styles are used on the `.flickity-slide` class.

#### flickity-is-draggable

    @include flickity-is-draggable;

Adds styles for the Flickity's "draggable" mode. These styles are used on the `.is-draggable` modifier class, chained to the `.flickity-enabled` class.

#### flickity-prev-next-button

    @include flickity-prev-next-button;

Adds styles for the Flickity's previous and next buttons. These styles are used on the `.flickity-prev-button` and `.flickity-next-button` classes

#### flickity-prev-button

    @include flickity-prev-button;

Adds styles for the Flickity's previous button. These styles are used on the `.flickity-prev-button`

#### flickity-next-button

    @include flickity-next-button;

Adds styles for the Flickity's next button. These styles are used on the `.flickity-next-button`

#### flickity-page-dots

    @include flickity-page-dots;

Adds styles for the Flickity's page buttons. These styles are used on the `.flickity-page-buttons`

## JavaScript Reference

### Initializing

The file `foundation.flickity.js` must be included in your JavaScript to use this plugin, along with `foundation.core.js`. This plugin also requires these utility libraries:

- `jquery.mousewheel.js`

- `flickity.pkgd.js`

### Foundation.FlickityCarousel

Creates a new instance of a Flickity Carousel.

    var elem = new Foundation.FlickityCarousel(element, options);

Name | Type | Description
--- | --- | ---
`element` | jQuery | jQuery object to make into an Flickity Carousel.
`options` | Object | Overrides to the default plugin settings.

### Plugin Options

Use these options to customize an instance of Flickity. Plugin options can be set as individual data attributes, one combined `data-options` attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

Name | Type | Default | Description
--- | --- | --- | ---
`data-horizontal-scrolling` | `boolean` | `false` | Enable horizontal scrolling with mousewheel support
`data-disable-breakpoint` | `string` | `''` | Disable Flickity at a given breakpoint
`data-enable-breakpoint` | `string` | `''` | Enable Flickity at a given breakpoint
`data-prev-next-buttons` | `boolean` | `false` | Generates previous and next button HTML
`data-page-dots` | `boolean` | `false` | Generates page dots HTML
`data-accessible` | `boolean` | `true` | Allows FlickityCarousel to bind keyboard events to the slider

### Methods

#### destroy

    $('#element').foundation('destroy');

Destroys the carousel and hides the element.