Adding breakpoints causes issue with slider scrolling

[cbutler90]

I have a news slider that shows 3 cards at a time. When I add ":breakpoints="breakpoints" to 'vueper-slides' and click the right (custom) arrow to scroll through each slide at a time, the slider goes through all my cards at once. If I click the right arrow again, it takes me all the way back to the beginning of all 25 cards. A third click starts the slider the proper way. If I remove breakpoints, the issue is gone, but I need the responsiveness.

<vueper-slides 
     class="no-shadow"
     infinite
     arrows-outside
     :bullets="false"
     :visible-slides="3"
     :slide-multiple="false"
     :gap="3"
     :touchable="false"
     fixed-height="612px"
     :breakpoints="breakpoints">
          <template v-slot:arrow-left>
                <svg fill="none" stroke="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M11 19l-7-7 7-7m8 14l-7-7 7-7"></path></svg>
            </template>
            <template v-slot:arrow-right>
                <svg fill="none" stroke="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path></svg>
            </template>
            <vueper-slide v-for="article in articles" :key="article.id" :id="article.id">
                 <template v-slot:content>
                     <div class="vueperslide__content-wrapper">
                        <div class="news-card h-full rounded">
                            <NuxtLink :to="`/news/${article.slug}`">
                            <img class="lg:h-64 h-36 w-full object-cover object-center" :src="article.jetpack_featured_media_url" alt="news image">
                            <div class="content-wrapper">
                                  <h3 class="text-xl mb-2" v-html="article.title.rendered"></h3>
                                  <span class="leading-relaxed mb-3 text-base text-left" v-html="$options.filters.truncate(article.excerpt.rendered)"></span>
                                  <div class="flex items-center flex-wrap">
                                       <p class="md:mb-2 lg:mb-0 mt-3"> Read More
                                       <svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M5 12h14"></path>
                                            <path d="M12 5l7 7-7 7"></path>
                                       </svg>
                                    </p>
                                </div>
                            </div>
                            </NuxtLink>
                        </div>
                     </div>
               </template>
          </vueper-slide>
</vueper-slides>

and my breakpoints look like this:

breakpoints: {
                1200: {
                    visibleSlides: 2,
                    fixedHeight: '450px'
                },
                900: {
                    fixedHeight: '650px'
                },
                800: {
                    visibleSlides: 1
                }

[cbutler90]

To anyone reading this, I could not solve my problem. I ended up using vue-agile instead and it worked great with Nuxt

[Tobeyforce]

Switching to vue-agile doesn't seem like a great choice right now considering the author says he will not continue work on it :(.. I think vueper is the closest to feature complete, but it's a bit buggy right now and missing features like infinite on multiple which is a terrible shame.