Flickity carousel demo

Flickity makes carousels, galleries, & sliders that feel lively and effortless. Flickity can be used for creating beautiful image galleries with thumbnails. Here is the demo of adding lightbox gallery support for the Flickity carousel.


HTML Structure
<div id="flickity-carousel-gallery-demo" class="main-carousel">
    <a data-lg-size="1600-1200" href="img/img1.jpg" class="carousel-cell">
        <img src="img/thumb1.jpg" />
    <a data-lg-size="1600-1200" href="img/img2.jpg" class="carousel-cell">
        <img src="img/thumb2.jpg" />
var $flickityLG = document.querySelector('#flickity-carousel-gallery-demo');
if ($flickityLG) {
    var flkty = new Flickity($flickityLG, {
        cellAlign: 'center',
        pageDots: false,
        contain: true,
        autoPlay: true,
        on: {
            ready: function () {
                const container = document.querySelector('.flickity-slider');
                window.lightGallery(container, {
                    selector: '.carousel-cell',

SCSS (Optional)
.flickity-slider {
    .lg-item {
        img {
            height: 600px;

Edit this page on GitHub