https://github.com/phucbm/flickity-responsive

💻📱Responsive option for Flickity.
https://github.com/phucbm/flickity-responsive

flickity javascript jquery jquery-plugin responsive

Last synced: 25 days ago
JSON representation

💻📱Responsive option for Flickity.

• Host: GitHub
• URL: https://github.com/phucbm/flickity-responsive
• Owner: phucbm
• License: mit
• Created: 2021-08-14T04:38:57.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-04-26T09:00:34.000Z (over 1 year ago)
• Last Synced: 2024-10-01T10:41:22.775Z (about 1 month ago)
• Topics: flickity, javascript, jquery, jquery-plugin, responsive
• Language: JavaScript
• Homepage: https://flickity.netlify.app
• Size: 445 KB
• Stars: 8
• Watchers: 3
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Flickity Responsive

[![release](https://badgen.net/github/release/phucbm/flickity-responsive/)](https://github.com/phucbm/flickity-responsive/releases/latest)

[![minified](https://badgen.net/badge/minified/4KB/cyan)](https://www.jsdelivr.com/package/gh/phucbm/flickity-responsive)

[![jsdelivr](https://data.jsdelivr.com/v1/package/gh/phucbm/flickity-responsive/badge?style=rounded)](https://www.jsdelivr.com/package/gh/phucbm/flickity-responsive)

[![npm weekly download](https://badgen.net/npm/dm/flickity-responsive)](https://www.npmjs.com/package/flickity-responsive)

[![license](https://badgen.net/github/license/phucbm/flickity-responsive/)](https://github.com/phucbm/flickity-responsive/blob/main/LICENSE)

[![Netlify Status](https://api.netlify.com/api/v1/badges/9f75e2e8-1ebf-4aa7-83f0-c4fb4942df2e/deploy-status)](https://app.netlify.com/sites/flickity/deploys)

> A vanilla JS plugin that adds `responsive` option for Flickity. And more extendable settings, see [#docs](#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 👉 https://github.com/metafizzy/flickity/issues/233

So, I create a plugin that brings `responsive` to Flickity, just like the

way [Slick](https://kenwheeler.github.io/slick/) works.

## Getting started

Add the script to your project in this order 👇

- jQuery (optional)

- Flickity

- `flickity-responsive`

### NPM Package

Install NPM package

```shell

npm i flickity-responsive

```

Import

```js

import {FlickityResponsive} from "flickity-responsive";

```

### Download

👉 Self hosted - [Download the latest release](https://github.com/phucbm/flickity-responsive/releases/latest)

```html

```

👉 CDN Hosted - [jsDelivr](https://www.jsdelivr.com/package/gh/phucbm/flickity-responsive)

```html

```

## Usage

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

```js

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

```html



    


    


    




```


> ⚠️ Options set in HTML must be valid JSON.

## Docs

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

```js

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

```shell

# Run dev server

npm run dev

# Generate prod files

npm run prod

# Publish package

npm publish

# Netlify build

npm run build

```

## License

[MIT License](https://github.com/phucbm/flickity-responsive/blob/master/LICENSE)

Copyright (c) 2023 Phuc Bui

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