CODEWITHSUNDEEP
javascriptvue.jsnuxt.jsflickityvue-flickity
Maxime
Maxime

Reputation: 357

Custom buttons throwing "Flickity is not defined" in Nuxt application using carousel

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 ?

Upvotes: 2

Views: 721

Answers (1)

tony19
tony19

Reputation: 138276

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.

demo

Upvotes: 1

Related Questions