How i can solve this?

While the slider is initializing the slides have no spaces

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

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',
}

How i can solve this?

While the slider is initializing the slides have no spaces

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

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',
}

• vue.js
• swiper.js

1 Answer 1

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

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