Use Flickity with Vue.js

vue-flickity

Flickity for Vue.js, is a Vue Component you can use directly to your app. Flickity provides all sorts of flickable carousels.

Install

npm install vue-flickity

Usage

Script:

import Flickity from 'vue-flickity'

export default {
  components: {
    Flickity
  },
  data () {
    return {
      flickityOptions: {
        initialIndex: 3,
        prevNextButtons: true,
        pageDots: true,
        wrapAround: true,
        freeScroll: true
        // any options from Flickity can be used
      }
    }
  }
}

For more options which can be used, consult the Flickity API.

Template:

  <div>
   <h2>FreeScroll</h2>
  <flickity  class="flickity" ref="flickity" :options="flickityOptions">
    <div class="carousel-cell"></div>
    <div class="carousel-cell"></div>
    <div class="carousel-cell"></div>
    <div class="carousel-cell"></div>
    <div class="carousel-cell"></div>
  </flickity>
  </div>

Bind directly to the options you have set.

You can link directly to Flickity files on unpkg, and find the styles you can apply to it.

Supports only Vue >= 2.

GitHub page.