SSENSE / vue-carousel

A flexible, responsive, touch-friendly carousel for Vue.js
https://ssense.github.io/vue-carousel/
MIT License
1.72k stars 504 forks source link

Changing the window freezes the app. #529

Open TaeyoonKwon opened 4 years ago

TaeyoonKwon commented 4 years ago

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"