I am using a Flickity carousel in a vue (frontend) ruby on rails (backend) application. When my app loads the items in my carousel display vertically, as if the carousel didn’t even exist. If I resize my window, then the carousel kicks in (behaves like a carousel).
<template>
<Flickity ref="flickity" :key="keyIncrementer" :options="computedOptions">
<item1 />
<item2 />
<item3 />
</Flickity>
</template>
<script>
import Flickity from "vue-flickity";
import { debounce } from "lodash";
const DEFAULT_OPTIONS = {
cellAlign: "left",
pageDots: false,
prevNextButtons: true,
};
export default {
components: {
Flickity,
},
props: {
options: {
type: Object,
required: false,
default: () => ({}),
},
},
data() {
return {
keyIncrementer: 0,
};
},
computed: {
computedOptions() {
return { ...DEFAULT_OPTIONS, ...this.options };
},
},
created() {
this.$root.$on("refresh-carousel", this.refresh);
},
mounted() {
this.refresh();
window.addEventListener("resize", this.debounceRefresh);
},
beforeDestroy() {
window.removeEventListener("resize", this.debounceRefresh);
},
methods: {
debounceRefresh: debounce(function () {
this.refresh();
}, 100),
refresh() {
this.$nextTick(() => {
this.keyIncrementer++;
});
},
},
};
</script>
If anyone knows why this is happening, that would help. I would like to have a carousel as soon as the component mounts, without resizing.