Empty slides when slidesToShow > 1

[gbrocha]

Describe the bug I was using the carousel with slidesToShow = 7 to show 7 slides per page. When configuring slidesToScroll = 7 to pass 7 slides for navigation, it seems to me that Agile considered it as if there were 7 pages, but there were only 3 in fact (21 slides in total / 7). All of the following slides were empty spaces.

Code

<Agile :initialSlide="todayIndexInWeeks" class="calendar__week--carousel" :dots="false" :slidesToShow="7" :slidesToScroll="7" :infinite="false" > <div v-for="(day, index) in weeksFlated" :key="index"> {{ day.format('ddd') }} </div> </Agile>

To Reproduce

simply use slidesToScroll > 1

Expected behavior

what would be expected would be the behavior of passing the slides 7 in 7 without empty slides left.

Screenshots

The correct behavior seen in that SS: screenshot

And what happens when the 21 slides run out and empty slides start to appear: screenshot

Environment:

• OS: MacOS
• Browser: Brave
• Version: Actual

[tomphilpotts]

I have the same issue with slidesToScroll, lots of empty space even though with infinite: true

[Saggitarie]

Is this solved?

[Maizerer]

i have the same issue using Nuxt with :options="{ slidesToShow: 4, dots: false, navButtons: false, swipeDistance: 15, infinite: false, }" after scrolling through all the slides, then there are 3 empty slides

[geoffyuen]

I also have the same issue. It would be great if viewing the last slide it would align to the right side of the container -- especially if slidesToShow is fractional (eg. slidesToShow: 2.25)

[harimchung]

is it solved? I have just same problem

[gTerrusa]

I just had this issue. I was able to get around it by creating a new component, extending VueAgile, and overriding the 'canGoToNext' computed property. (Just changing the - 1 at the end of it to be - this.settings.slidesToShow) .... for those having issues with fractional slidesToShow, I think that having it be Math.floor(this.settings.slidesToShow) would work also, but this is untested.

components/ExtendedAgile.vue

<script>
import { VueAgile } from 'vue-agile'

export default {
  name: 'ExtendedAgile',

  extends: VueAgile,

  computed: {
    canGoToNext () {
      return (this.settings.infinite || this.currentSlide < this.countSlides - this.settings.slidesToShow)
    }
  }
}
</script>