Flickity

Touch enabled, responsive carousels to house almost any type of content.

About the Plugin

WebsiteGitHubnpm

Sliders are handled by the Flickity library from Metafizzy.

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

  1. Include the library in your page

    • Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.js and before theme.js.

      <!-- Flickity (handles touch enabled carousels and sliders) -->
<script type="text/javascript" src="assets/js/flickity.pkgd.js"></script>

      Alternatively you may wish to load this resource from a CDN to potentially improve page load times.

      <!-- Flickity (handles touch enabled carousels and sliders) -->
<script type="text/javascript" src="https://unpkg.com/flickity@~2.2.0"></script>
  2. Load the initializer code in index.js
    • Declare the following import statement in js/mrare/index.js. This ensures that the initializer code is included in the theme.js bundle.
      import './flickity';
  3. Load the required CSS in components.scss
    • Declare the following import statement in scss/custom/components.scss:
    @import "components/optional/flickity";

Basic Usage

Sliders are constructed in a div with attribute data-flickity. Each slide is a div with class carousel-cell.

<div data-flickity>
  <div class="carousel-cell">
    <img src="assets/img/image-1.jpg" alt="Image 1">
  </div>
  <div class="carousel-cell">
    <img src="assets/img/image-2.jpg" alt="Image 2">
  </div>
  <div class="carousel-cell">
    <img src="assets/img/image-3.jpg" alt="Image 3">
  </div>
</div>

Options

Options are passed to Flickity through JSON on the data-flickity attribute. Note the use of single quotes around the JSON object.

<div data-flickity='{ "imagesLoaded": true, "wrapAround": true }'>
  <div class="carousel-cell">
    <img src="assets/img/image-1.jpg" alt="Image 1">
  </div>
  <div class="carousel-cell">
    <img src="assets/img/image-2.jpg" alt="Image 2">
  </div>
  <div class="carousel-cell">
    <img src="assets/img/image-3.jpg" alt="Image 3">
  </div>
</div>

For a full list of options, please see the Flickity Documentation

Options set in HTML must be valid JSON. Keys need to be quoted, for example "cellAlign":. Note that the attribute value uses single quotes ', but the JSON entities use double-quotes ". Boolean values true and false should not be wrapped in any quotes.

Highlight Selected

Add class highlight-selected to the div[data-flickity] element to emphasise the currently selected slide and de-emphasise the others.

<div class="highlight-selected" data-flickity>
  <div class="carousel-cell">
    <img src="assets/img/image-1.jpg" alt="Image 1">
  </div>
  <div class="carousel-cell">
    <img src="assets/img/image-2.jpg" alt="Image 2">
  </div>
  <div class="carousel-cell">
    <img src="assets/img/image-3.jpg" alt="Image 3">
  </div>
</div>

This is an option provided by CSS included in this theme and is not an official Flickity option.