vue3-flickity
Vue 3 wrapper for flickity
Usage
<Flickity :options="{ wrapAround: true }">
<img v-for="i in 5" :src="`https://picsum.photos/id/${i}/200/200`" alt="">
</Flickity>Props
| name | type | description |
|---|---|---|
| options | Object | https://flickity.metafizzy.co/options.html |
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