outlawplz/flickity

This package is abandoned and no longer maintained. No replacement package was suggested.

Provides Flickity library integration for Drupal.

v0.3.0 2018-03-05 10:33 UTC

GPL-3.0

• Matteo Palazzo

README

Provides Flickity library integration for Drupal 8.

Quick Start

Start using Flickity in three steps.

1. Download latest Flickity module form Github or via Composer and enable it as usual.

composer require outlawplz/flickity

1. Download latest Flickity library and copy it to the libraries/ folder found at Drupal root folder.

# CSS file location
/libraries/flickity/dist/flickity.min.css

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

1. In a Reference Entity field select Flickity as display mode.

That's it. You're all set to start using Flickity.

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.

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

To learn more about Flickity options, check out the official documentation.

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.

# 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.