vue.jsswiper.js

Jumping spacebetwen when initialize

How i can solve this?

While the slider is initializing the slides have no spaces

on init

and after initialization they appear and the result is an ugly jump

after init

I tried to set additional indents via CSS as a fallback but then somehow the coordinates for the slideNext slidePrev methods are calculated incorrectly

const defaultSettings: SwiperOptions = {
    spaceBetween: 16,
    slidesPerView: 'auto',
}
Solution

  • Apply gap to .swiper-wrapper until .swiper is initialized:

    .swiper {
  &:not(.swiper-initialized) {
    .swiper-wrapper {
      gap: 16px;
    }
  }
}