outlawplz/flickity

Provides Flickity library integration for Drupal.

Flickity

Provides Flickity library integration for Drupal 8., _(*1)

Quick Start

Start using Flickity in three steps., _(*2)

1. Download latest Flickity module form Github or via Composer and enable it as usual., _(*3)

   composer require outlawplz/flickity
   

2. Download latest Flickity library and copy it to the libraries/ folder found at Drupal root folder., _(*4)

   # CSS file location
   /libraries/flickity/dist/flickity.min.css
   
   # JS file location
   /libraries/flickity/dist/flickity.pkgd.min.js
   

3. In a Reference Entity field select Flickity as display mode., _(*5)

That's it. You're all set to start using Flickity., _(*6)

Options

You can add new configurations or edit existing ones at Configuration > User interface > Flickity. Common options are listed as fields, while advanced options are stored in YAML format., _(*7)

# E.g.
imagesLoaded: true
groupCells: 2
lazyLoad: true

To learn more about Flickity options, check out the official documentation., _(*8)

Style

Flickity uses CSS to set cell sizing. This way you can alter the number of cell visible at different display size using media queries., _(*9)

# Small screens
@media (max-width: 560px) {
  .field__item {
    width: 50%;
  }
}

# Wide screens
@media (min-width: 561px) {
  .field__item {
    width: 25%;
  }
}

To learn more about Flickity styling, check out the official documentation., _(*10)