https://github.com/drewjbartlett/vue-flickity

A Vue Slider / Carousel Component for Flickity.js
https://github.com/drewjbartlett/vue-flickity

carousel flickity slider vue vue-components

Last synced: 6 months ago
JSON representation

A Vue Slider / Carousel Component for Flickity.js

• Host: GitHub
• URL: https://github.com/drewjbartlett/vue-flickity
• Owner: drewjbartlett
• Created: 2016-12-05T23:14:55.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2021-08-10T17:49:21.000Z (over 4 years ago)
• Last Synced: 2025-05-11T19:01:35.118Z (6 months ago)
• Topics: carousel, flickity, slider, vue, vue-components
• Language: Vue
• Homepage: http://drewjbartlett.com/demos/vue-flickity/
• Size: 161 KB
• Stars: 373
• Watchers: 9
• Forks: 55
• Open Issues: 25
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-vue - vue-flickity - A Vue Component for Flickity.js. (Components & Libraries / UI Components)
• awesome-vue-refactor - vue-flickity
• awesome-vue-zh - vue-flickity - Flickity.js的Vue组件. (UI组件 / 圆盘传送带)
• awesome-vue - vue-flickity ★246 - A Vue Component for Flickity.js. (UI Components / Carousel)
• awesome-vue - vue-flickity - A Vue Component for Flickity.js. (UI Components / Carousel)

README

          
# Flickity for Vue.js

[![npm](https://img.shields.io/npm/v/vue-flickity.svg?style=flat-square)](https://www.npmjs.com/package/vue-flickity)

[![npm](https://img.shields.io/npm/dt/vue-flickity.svg?style=flat-square)](https://www.npmjs.com/package/vue-flickity)

[![npm](https://img.shields.io/travis/drewjbartlett/vue-flickity.svg?branch=master&style=flat-square)](https://www.npmjs.com/package/vue-flickity)

A Vue Component for Flickity.js - See a live demo [here](http://drewjbartlett.com/demos/vue-flickity/).



    

    



## Vue support

Supports only Vue >= 2

## Installation and usage

See official documentation [here](http://flickity.metafizzy.co/).

  $ npm install vue-flickity --save

```js

import Flickity from 'vue-flickity';

new Vue({

  components: {

    Flickity

  },

  

  data() {

    return {

      flickityOptions: {

        initialIndex: 3,

        prevNextButtons: false,

        pageDots: false,

        wrapAround: true

        

        // any options from Flickity can be used

      }

    }

  },

  

  methods: {

    next() {

      this.$refs.flickity.next();

    },

    

    previous() {

      this.$refs.flickity.previous();

    }

  }

});

```

```html

  
1

  
2

  
3

  
4

  
5


Custom Previous Button

Custom Next Button

```