Flickity Responsive v2.1.3

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

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

Extra feature

Automatically detect whether the slider is slide-able or not on load and resize. If the slider is not slide-able, the navigation elements will be hidden, draggable will be disabled.

// custom arrows
const carouselArrows = new FlickityResponsive('.carousel-arrows', {
    responsiveNavigation: true, // true by default
});

Extra feature

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

// custom arrows
const carouselArrows = new FlickityResponsive('.carousel-arrows', {
    prevArrow: document.querySelectorAll('#prev, .backward'),
    nextArrow: document.querySelectorAll('#next, .forward')
});

Extra feature

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

Notice that the total number is for the slides, not the cells. If you have 6 cells but only 2 slides, and groupCells:"100%", the total number will be 2. The first slide will have 3 cells and the second slide will have 2 cells. The total slide number is calculated by groupCells.

const carouselIndicator = new FlickityResponsive('.carousel-indicator', {
    indicatorCurrent: document.querySelector('.current-number'),
    indicatorTotal: document.querySelector('.total-number')
});
            

Extra feature

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