Click to Copy
Flickity is a lightweight, powerful, and touch-friendly JavaScript library that makes carousels smooth and fun to use. Whether you’re building a product showcase, a media slider, or a dynamic gallery, Flickity delivers seamless, fluid, and interactive experiences right out of the box!
Simply add these lines in your HTML file:
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js">
Download Flickity from Flickity’s GitHub
Place flickity.pkgd.min.js and flickity.min.css in
your project folder
Link them in your HTML file
Flickity works on a container carousel element with a group of cell elements.
<div class="main-carousel">
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
...
</div>
You can use Flickity with vanilla JS :
new Flickity( elem )
document.addEventListener("DOMContentLoaded", () => {
var elem = document.querySelector('.carousel');
new Flickity(elem, {
cellAlign: 'left',
contain: true
});
});