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

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

Extra feature

Responsive navigation

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.

View code

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

Extra feature

Custom arrows

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

0/0

Using JS

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

Using HTML attribute

Use data-prev-arrow and data-next-arrow to assign custom prev/next buttons. Make sure the slider element and the arrow element are in the same parent.

Extra feature

Indicator numbers

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.

0/0

Using JS

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

Using HTML attribute

Use data-indicator-current and data-indicator-total to receive update about slide's position. Make sure the slider element and the indicator element are in the same parent.

Extra feature

Force move

Enabled by default forceMove:true. This extra option will make sure that the carousel will move on every arrow click.

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