vue3-flickity

vue3-flickity

Vue 3 wrapper for flickity

Usage

<Flickity :options="{ wrapAround: true }">
  <img v-for="i in 5" :src="https://gitlab.com/broj42/vue3-flickity/-/raw/HEAD/`https://picsum.photos/id/${i}/200/200`" alt="">
</Flickity>

Props

Besides default flickity options, there's an extra attribute removeAriaHidden which removes aria-hidden="true" from slides - default is true

Vue3 usage

import { createApp } from 'vue'
import App from './App.vue'

import Flickity from 'vue3-flickity'

// You can use it without styles and write your own styles
import 'vue3-flickity/style';

const app = createApp(App)

app.use(Flickity)
app.mount('#app')

Nuxt 3 usage

Create a plugin

import Flickity from 'vue3-flickity'
import 'vue3-flickity/style'

export default defineNuxtPlugin(async nuxtApp => {
  nuxtApp.vueApp.use(Flickity)
})

Events

Same as in flickity (https://flickity.metafizzy.co/events.html)

• ready
• change
• select
• settle
• scroll
• dragStart
• dragMove
• dragEnd
• pointerDown
• pointerMove
• pointerUp
• staticClick
• lazyLoad
• bgLazyLoad
• fullscreenChange