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!

Custom previous/next selectors

To have an element (or a comma separated list of elements) trigger the carousel to proceed to the previous slide, set the data-previous-element attribute to your selector of choice (for example, .previous-link or .previous-link, .some-other-link). The same goes for the data-next-element attribute, which will trigger the carousel to proceed to the next slide.

Note: these elements do not have to be within the data-flickity-carousel wrapper.

<div class="flickity" role="region" aria-label="Favorite Space Pictures" data-flickity-carousel data-previous-element=".previous-link" data-next-element=".next-link, #some-button" data-wrap-around="true">
  <div class="flickity-slide">
    <img class="flickity-image" src="assets/img/orbit/02.jpg" alt="Space">
  </div>
  <div class="flickity-slide">
    <img class="flickity-image" src="assets/img/orbit/04.jpg" alt="Space">
  </div>
  <div class="flickity-slide">
    <img class="flickity-image" src="assets/img/orbit/01.jpg" alt="Space">
  </div>
</div>

<p>Clicking <a class="previous-link" href="#">this</a> link will take you to the previous slide, while clicking <a class="next-link" href="#">this</a> link will take you to the next slide.</p>

<button id="some-button" class="button">Some button</button>

Clicking this link will take you to the previous slide, while clicking this link will take you to the next slide.

Enable autoplay at a media query breakpoint

Often times carousels' contents stack at mobile window sizes, causing the height to change from slide to slide. If the carousel's autoPlay option is enabled, this can have the undesirable consequence of pushing all the content below the carousel up and down the page at intervals.

To prevent this, set the data-auto-play-breakpoint attribute to the same breakpoint name as when the carousel's contents unstack.

Note: there's no need to set the data-auto-play attribute to true in addition to using data-auto-play-breakpoint

<div class="flickity" role="region" aria-label="Favorite Space Pictures" data-flickity-carousel data-auto-play-breakpoint="large" data-pause-auto-play-on-hover="false" data-wrap-around="true">
  <div class="flickity-slide">
    <div class="row">
      <div class="large-6 column">
        <img class="flickity-image" src="assets/img/orbit/01.jpg" alt="Space">
      </div>
      <div class="large-6 column">
        <p>Cupidatat commodo officia qui nisi culpa ullamco pariatur velit pariatur reprehenderit laboris anim mollit magna voluptate tempor consequat. Proident officia incididunt nulla occaecat sit ipsum et ex reprehenderit voluptate non duis ad adipisicing non culpa reprehenderit. Anim Lorem dolor in veniam et irure aliqua ipsum reprehenderit irure qui.</p>
      </div>
    </div>
  </div>

  <div class="flickity-slide">
    <div class="row">
      <div class="large-6 column">
        <img class="flickity-image" src="assets/img/orbit/02.jpg" alt="Space">
      </div>
      <div class="large-6 column">
        <p>Occaecat velit esse non ullamco nulla ad aute proident pariatur cillum magna. Sit esse ullamco aliqua dolor et est aliquip culpa ea eiusmod cillum cillum quis. Dolor ut tempor ut aliqua proident sit commodo in qui labore aliqua in minim. Ad elit nostrud proident aliqua amet ipsum officia consectetur qui tempor aliqua.</p>

        <p>Mollit in occaecat consequat fugiat deserunt ut et in cillum exercitation deserunt ad. Lorem dolore excepteur aliquip mollit in minim exercitation. Mollit ut laborum labore officia deserunt laboris sit velit officia et laboris est ad consectetur cillum. Ullamco consequat deserunt Lorem id ex ad eu fugiat ad esse in. Dolor minim ad do nulla fugiat laborum adipisicing dolore sit enim eu exercitation excepteur.</p>
      </div>
    </div>
  </div>

  <div class="flickity-slide">
    <img class="flickity-image" src="assets/img/orbit/03.jpg" alt="Space">
  </div>
</div>

Cupidatat commodo officia qui nisi culpa ullamco pariatur velit pariatur reprehenderit laboris anim mollit magna voluptate tempor consequat. Proident officia incididunt nulla occaecat sit ipsum et ex reprehenderit voluptate non duis ad adipisicing non culpa reprehenderit. Anim Lorem dolor in veniam et irure aliqua ipsum reprehenderit irure qui.

Occaecat velit esse non ullamco nulla ad aute proident pariatur cillum magna. Sit esse ullamco aliqua dolor et est aliquip culpa ea eiusmod cillum cillum quis. Dolor ut tempor ut aliqua proident sit commodo in qui labore aliqua in minim. Ad elit nostrud proident aliqua amet ipsum officia consectetur qui tempor aliqua.

Mollit in occaecat consequat fugiat deserunt ut et in cillum exercitation deserunt ad. Lorem dolore excepteur aliquip mollit in minim exercitation. Mollit ut laborum labore officia deserunt laboris sit velit officia et laboris est ad consectetur cillum. Ullamco consequat deserunt Lorem id ex ad eu fugiat ad esse in. Dolor minim ad do nulla fugiat laborum adipisicing dolore sit enim eu exercitation excepteur.

Disable or enable Flickity at a media query breakpoint

To completely 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 completely 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!

Disable dragging

Set the data-no-dragging attribute to true to disable dragging. The carousel will then only proceed with its controls or with the autoplay option enabled.

<div class="flickity" role="region" aria-label="Favorite Space Pictures" data-flickity-carousel data-no-dragging="true" data-auto-play="true" data-pause-auto-play-on-hover="false" data-wrap-around="true">
  <div class="flickity-slide">
    <img class="flickity-image" src="assets/img/orbit/03.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/04.jpg" alt="Space">
    <figcaption class="flickity-caption">Lets Rocket!</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>

Space, the final frontier.

Lets Rocket!

<div class="flickity" role="region" aria-label="Favorite Space Pictures" data-flickity-carousel data-resize="false">
  <div class="flickity-slide">
    <img class="flickity-image" src="assets/img/orbit/03.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/04.jpg" alt="Space">
    <figcaption class="flickity-caption">Lets Rocket!</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>

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-previous-element`	`string`	`''`	Comma separated list of selectors that will trigger the previous slide in the carousel
`data-next-element`	`string`	`''`	Comma separated list of selectors that will trigger the next slide in the carousel
`data-auto-play-breakpoint`	`string`	`''`	Enable autoPlay option at a given breakpoint
`data-disable-breakpoint`	`string`	`''`	Disable Flickity at a given breakpoint
`data-enable-breakpoint`	`string`	`''`	Enable Flickity at a given breakpoint
`data-no-dragging`	`boolean`	`false`	Disable dragging
`data-prev-next-buttons`	`boolean`	`false`	Generates previous and next button HTML
`data-page-dots`	`boolean`	`false`	Generates page dots HTML
`data-images-loaded`	`boolean`	`true`	Re-positions carousel once its images have loaded

Methods

destroy

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

Destroys the carousel and hides the element.