Share on facebook
Share on twitter

Flickity: Beautiful Galleries on All Devices – Responsive and With Gesture Control

There are several solutions to creating galleries via JavaScript. But sometimes you may find the handling is not convincing, others provide a rather poor functionality. Flickity, however, is a state-of-the-art JavaScript framework for galleries that works great on desktops, as well as mobile devices. The gallery is responsive and can be controlled with your mouse or gestures – or even your keyboard. Thanks to CSS3 you can quickly navigate through galleries with animations. Quickly Integrated and Configured If you don’t want to read the documentation, you can quickly integrate Flickity into your project without any further configuration. You need to add a JavaScript file for the functionality and a stylesheet file for the layout and animated transitions to the HTML header. Then you can mark up the gallery via HTML. Define a container element that wraps around all gallery elements and assign the classes “gallery” and “js-flickity” to it. This can be a

element or any other block element, for example,

. Add the class “gallery-cell” to each gallery element. This can also be a