Flickity for Vue.js 3


A Vue 3 Component for Flickity.js - See a live demo here.

Vue support

Supports only Vue >= 3

Installation and usage

See official documentation here.

$ npm i @toneflix-code/flickity-vue

``js
import { createApp } from "vue";
import App from "./App.vue";

import flickity from "@toneflix-code/flickity-vue";

createApp(App).use(flickity).mount("#app");

new Vue({
components: {
FlickityMain,
FlickityCell,
},

data() {
return {
flickityOptions: {
initialIndex: 3,
prevNextButtons: false,
pageDots: false,
wrapAround: true,

// any options from Flickity can be used
},
};
},
});
`

`html

1
2
3
4
5



Custom Previous Button
Custom Next Button
`

$3

Any options from Flickity can be passed a props

`html
ref="flickity"
prev-next-buttons
page-dots
wrap-around
:initial-index="3"
>
1
2
3
4
5

``