Carousel
Hubble's carousel component uses an open source library called flickity.js.
The library uses a combination JavaScript and CSS to produce cross-browser, responsive,
mobile and touch enabled carousels.
This documentation only shows some very simple usage examples. For more in-depth documentation please see the flickity.js website.
Basic example
Carousels can be enabled through HTML markup rather than manually via JavaScript.
The options are stored as JSON in the data-flickity attribute.
Here's a very simple example.
Initialization
There are two ways to initialize Flickity.
Initialize with JavaScript
To retrieve the Flickity object, simply call it from the Module loader with Hubble.require('Flickity');.
The constructor accepts two arguments: the carousel element and an options object.
Initialize with HTML
You can initialize Flickity in HTML, without writing any JavaScript. Add data-flickity attribute to the carousel element. Options can be set in its value.
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".
Styling
To provide as much customization as possible, Flickity provides only the styles necessary for the carousel to function. All sizing and styling of the cells are handled by your own CSS. The height of the carousel is set to the maximum height of the cells.