# Flickity

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

###

About the Plugin

Website GitHub npm

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.