vue-carousel
vue-carousel copied to clipboard
Changing the window freezes the app.
Bug Report
Current Behavior I am using vue-carousel on Nuxt app. Though I am only testing it without installing any other package, it freezes the app when I change the window's width.
It seems happens when I shrink the width below 768.
I tried both on dev mode and production mode. And both resulted in freezing the app.
Here is the full code, and this is all I have in my app.
Input Code and steps to reproduce
<template>
<div class="container">
<client-only>
<carousel
:scrollPerPage="true"
:perPageCustom="[
[480, 4],
[768, 6]
]"
:loop="true"
:mouse-drag="true"
:autoplay="true"
:navigationEnabled="true"
:paginationEnabled="false"
id="carousel"
>
<slide v-for="item in carouselContents" :key="item.id">
<div class="box-slide">
{{ item }}
</div>
</slide>
</carousel>
</client-only>
</div>
</template>
<script>
export default {
data() {
return {
carouselContents: [
"Slide 1 Content",
"Slide 2 Content",
"Slide 3 Content",
"Slide 4 Content",
"Slide 5 Content",
"Slide 6 Content",
"Slide 7 Content",
"Slide 8 Content",
"Slide 9 Content",
"Slide 10 Content",
"Slide 11 Content",
"Slide 12 Content"
]
};
}
};
</script>
<style>
.container {
margin: 0 auto;
min-height: 100vh;
max-width: 1024px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
}
#carousel {
max-width: 1024px;
width: 90%;
}
</style>
in nuxt.config.js
plugins: [
{ src: "@/plugins/vue-carousel", mode: "client" }
],
Expected behavior/code It should not freeze. I have nothing but plain default nuxt app and vue-carousel installed.
Environment nuxt: "^2.13.0" vue-carousel: "^0.18.0"