I am attempting to connect my own personalized buttons to a flickity carousel within a nuxt application. Within my carousel component, the following code is present:
<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");
var previousButton = document.querySelector('.button--previous')
previousButton.addEventListener('click', function () {
flkty.previous()
})
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>
Inside my plugins folder resides a vue-flickity.js file:
import Vue from 'vue'
import Flickity from 'vue-flickity'
Vue.component('Flickity', Flickity)
The carousel functions properly without utilizing my custom buttons. However, when using the customized buttons, an error message appears stating
ReferenceError: Flickity is not definedvar flkty = new Flickity(".carousel");Missing stack frames.
Something seems amiss here, but what could it be?