Coder Social home page Coder Social logo

phucbm / flickity-responsive Goto Github PK

View Code? Open in Web Editor NEW
7.0 3.0 0.0 456 KB

💻📱Responsive option for Flickity.

Home Page: https://flickity.netlify.app

License: MIT License

JavaScript 70.74% HTML 25.46% SCSS 3.80%
flickity jquery-plugin jquery responsive javascript

flickity-responsive's Introduction

Flickity Responsive

release minified jsdelivr npm weekly download license Netlify Status

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 People

Contributors

phucbm avatar vuquangpham avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

flickity-responsive's Issues

How to destroy

How can I properly destroy an instance of FlickityResponsive?

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

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!

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..

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.