Flickity Responsive

Init with vanilla JS

On screen less than or equal to 768px, show page dots and hide arrows.

// init with vanilla JS
const carousel = new FlickityResponsive('.carousel', {
    pageDots: false,
    responsive: [
        {
            breakpoint: 768,
            settings: {
                prevNextButtons: false,
                pageDots: true,
            }
        }
    ]
});

Init with jQuery

On screen less than or equal to 768px, destroy carousel.

jQuery('.carousel-2').flickityResponsive({
    responsive: [
        {
            breakpoint: 768,
            settings: {
                destroy: true
            }
        }
    ]
});

Init with HTML

Navigation elements (dots, arrows) will auto-hide if the carousel is not slide-able.

data-flickity-responsive='{ "cellAlign": "left" }'

Extra feature

Use prevArrow and nextArrow to assign custom prev/next buttons.

Use indicatorCurrent and indicatorTotal to receive update about slide's position.

// custom arrows
const carouselArrows = new FlickityResponsive('.carousel-arrows', {
    prevNextButtons: false,
    indicatorCurrent: document.querySelector('#current'),
    indicatorTotal: document.querySelector('#total'),
    prevArrow: document.querySelector('#prev'),
    nextArrow: jQuery('#next'),
    cellAlign: 'center',
    contain: true
});

Extra feature

Use forceMove:false if you prefer the normal behaviour of the carousel.