Responsive (Swiper slide)

Allows to set different parameter for different responsive breakpoints (screen sizes).

This option appears in most sections that contain sliders.

{
  // when window width is >= 0px
  "0": {
    "slidesPerView": 1,
    "spaceBetween": 20
  },
  // when window width is >= 320px
  "320": {
    "slidesPerView": 1,
    "spaceBetween": 20
  },
  // when window width is >= 768px
  "768": {
    "slidesPerView": 2,
    "spaceBetween": 20
  },
  // when window width is >= 992px
  "992": {
    "slidesPerView": 3,
    "spaceBetween": 20
  },
  // when window width is >= 1200px
  "1200": {
    "slidesPerView": 4,
    "spaceBetween": 20
  }
}

slidesPerView

Number of slides per view (slides visible at the same time on slider's container).

spaceBetween

Distance between slides in px.

Last updated