phucbm / flickity-responsive

💻📱Responsive option for Flickity.

Flickity Responsive

A vanilla JS plugin that adds responsive option for Flickity. And more extendable settings, see #docs

Introduction

At the time of this plugin was made, Flickity does not officially offer any way to update the options on various screen-sizes.

Read more about the issue here 👉 metafizzy/flickity#233

So, I create a plugin that brings responsive to Flickity, just like the way Slick works.

Getting started

Add the script to your project in this order 👇

• jQuery (optional)
• Flickity
• flickity-responsive

NPM Package

Install NPM package

npm i flickity-responsive

Import

import {FlickityResponsive} from "flickity-responsive";

Download

👉 Self hosted - Download the latest release

<script src="./flickity-responsive.min.js"></script>

👉 CDN Hosted - jsDelivr

<script src="https://cdn.jsdelivr.net/gh/phucbm/[email protected]/flickity-responsive.min.js"></script>

Usage

Just change the name, all other options stay the same.

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

Init with HTML

Use data attribute to init Flickity Responsive, just exactly like Flickity.

<div data-flickity-responsive='{ "cellAlign": "left", "contain": true }'>
    <div class="carousel-cell"></div>
    <div class="carousel-cell"></div>
    <div class="carousel-cell"></div>
</div>

⚠️ Options set in HTML must be valid JSON.

Docs

Visit https://flickity.netlify.app for examples.

const carousel = new FlickityResponsive('.carousel', {
    contain: true, // default in Flickity Responsive

    // Extra features 👇

    // destroy
    destroy: false,

    // custom arrows
    prevArrow: undefined, // DOM element, jQuery element
    nextArrow: undefined, // DOM element, jQuery element

    // indicator numbers
    indicatorCurrent: undefined, // DOM element, jQuery element
    indicatorTotal: undefined, // DOM element, jQuery element

    // hide navigation elements if the slider is not slide-able
    responsiveNavigation: true,

    // indicator
    indicatorZeroPad: false,
    indicatorCurrent: undefined,
    indicatorTotal: undefined,

    // force move
    forceMove: true, // make sure that every time an arrows clicked, the carousel will move
});

FYI

This plugin respects Flickity's API and use matchMedia() to know when to destroy and re-initialize the carousel.

⚠️ Important note: the breakpoint property is using CSS max-width logic. For instance, when you set breakpoint:480, that means responsive settings will be applied when the viewport is <=480px (while Slick is <480px). Let's be cleared 💎

Deployment

Before release, update version in package.json and README.md.

# Run dev server
npm run dev

# Generate prod files
npm run prod

# Publish package
npm publish

# Netlify build
npm run build

License

MIT License

Copyright (c) 2023 Phuc Bui

Please leave a star ⭐️ to support my work. Thank you!

flickity-responsive's Issues

refactor with webpack dev

Custom arrows not hidden when the carousel is not enabled

For some reason, when the carousel is not enabled, custom arrows still exist, while we don't need it?

How to destroy

How can I properly destroy an instance of FlickityResponsive?

entity.flickity('destroy'); doesn't work.

select() not working after resize

I am using v.2.0.6 in Vue and have a initialized a slideshow like this:

this.flkty = new FlickityResponsive( slideshow, {
 	cellAlign: 'left',
 	prevNextButtons: false,
	pageDots: true,
	wrapAround: true,	
	autoPlay: false,
	pauseAutoPlayOnHover: false,
	draggable: false,
	selectedAttraction: 0.013,
	friction: 0.26,
	dragThreshold: 1,
	adaptiveHeight: true,
	imagesLoaded:true,
	responsive: [{
		breakpoint: 768,
		settings: {
			draggable: true,
			selectedAttraction: 0.2,
    		        friction: 0.8	
		}
	}]		
});

I have a button which, on click, executes the following code:

this.flkty?.select( index, false, false );

It works, but as soon as I downsize the window to match the breakpoint, the code isn't working anymore. There is no error message, it just doesn't do anything. It also doesn't work when I resize the window back to its default desktop size.

Any idea how to fix this?

--- EDIT

Other commands like .next() or .previous() aren't working either..

add event to know when a breakpoint changes

Default Flickity option turning on when we manually "resize"

I have a button on my website which trigger the height of the carrousel, and for it to work properly, it refresh the carrousel through "resize"
but sadly, when it force refresh, the default Flickity option are back (arrow, pagedot, draggable).

var $carousel = $('.carousel').flickity();

$('.button').on('click', function () {
    $carousel.toggleClass('is-expanded')
    setTimeout(function () {
        $carousel.flickityResponsive('resize');
    }, 600);
    $('.caption').toggleClass('hidden');
});

No issue

It's a great library, thank you!