flickity

ui-component carousel responsive

Flickity is a JavaScript library designed to create touch-enabled, responsive, and flickable galleries. It allows users to easily set up image or content sliders on their web pages, supporting features such as touch swipe, responsive layouts, and smooth dragging on both desktop and mobile devices.

Latest Ver 3.0.0

Homepage

Github

7,586

📢 JavaScript library for creating touch-enabled and responsive gallery sliders

CDN Download

License: GPL-3.0

Asset Type :

View All Versions

https://cdnjs.cloudflare.com/ajax/libs/flickity/3.0.0/flickity.pkgd.js

https://cdnjs.cloudflare.com/ajax/libs/flickity/3.0.0/flickity.pkgd.min.js

https://cdnjs.cloudflare.com/ajax/libs/flickity/3.0.0/flickity.css

https://cdnjs.cloudflare.com/ajax/libs/flickity/3.0.0/flickity.min.css

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 HTML
<div class="gallery js-flickity" data-flickity-options='{"cellAlign": "left", "contain": true}'><div class="gallery-cell">Your content here</div><div class="gallery-cell">More content here</div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.pkgd.min.js"></script><script>var flkty = new Flickity('.gallery');</script>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.pkgd.min.js"></script>

⚙️ JavaScript
var flkty = new Flickity('.gallery');