I am trying to wire my own custom buttons to a flickity carousel in a nuxt application. In my carousel component I have this code
<template>
<ClientOnly>
<Flickity
ref="flickity"
:key="keyIncrementer"
class="carousel"
:class="{ 'carousel--active': active }"
:options="computedOptions"
>
<slot />
</Flickity>
</ClientOnly>
</template>
<script>
export default {
beforeCreate() {
var flkty = new Flickity(".carousel");
// previous
var previousButton = document.querySelector('.button--previous')
previousButton.addEventListener('click', function () {
flkty.previous()
})
// next
var nextButton = document.querySelector('.button--next')
nextButton.addEventListener('click', function () {
flkty.next()
})
},
beforeDestroy() {
window.removeEventListener('resize', this.debounceRefresh)
nextButton.removeEventListener('click', function () {
flkty.next()
})
previousButton.removeEventListener('click', function () {
flkty.previous()
})
},
}
</script>
In my plugins folder I have a vue-flickity.js file
import Vue from 'vue'
import Flickity from 'vue-flickity'
Vue.component('Flickity', Flickity)
Without trying to use my own custom buttons the carousel works fine. But with the custom buttons I get an error message ReferenceError Flickity is not defined for this line => var flkty = new Flickity(".carousel"); and Missing stack frames
I am obviously doing something wrong here but what ?
Your usage of Flickity in new Flickity() assumes that the Flickity constructor (from the flickity package) is globally defined (perhaps by vue-flickity), but that's not the case. Also, flickity and vue-flickity are not intended to be used simultaneously like that.
To bind vue-flickity's next/previous methods as handlers for your own buttons, use @click handlers on the buttons that call this.$refs.flickity.next()/this.$refs.flickity.previous():
<Flickity ref="flickity" class="carousel">...</Flickity>
<button @click="next">Next</button>
<button @click="prev">Prev</button>
export default {
methods: {
next() {
this.$refs.flickity.next()
},
prev() {
this.$refs.flickity.previous()
},
},
}
This is actually the same example from the vue-flickity usage docs.