Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Swiper spaceBetween doesn't work properly

I'am trying to use slidesPerView: 'auto' with spaceBetween: 20 property, but Swiper shows only one slide per view.

I want to show next slide right after the first one even if it will be cutted by the document width.

  $(document).ready(function () {
     //initialize swiper when document ready
     var mySwiper = new Swiper('.swiper-container', {
        // Optional parameters
        loop: false,
        slidesPerView: 3,
        spaceBetween: 40,
        navigation: {
           prevEl: '.slider .prev-btn',
           nextEl: '.slider .next-btn',
        },
        breakpoints: {
           1200: {
              slidesPerView: 'auto',
              spaceBetween: 40,
           },
           830: {
              slidesPerView: 'auto',
              spaceBetween: 10, // <- doesn't work
           }
        }
     });
  });

But it shows only one slide per view and ignores the space which is set in options.

enter image description here

How to set space between slides strictly?

like image 567
mr.boris Avatar asked Sep 03 '25 15:09

mr.boris


1 Answers

I had the same problem with slidesPerView: 'auto' always showing only one slide. The solution for me was with CSS: (codepen)

.swiper-container{
  width: 100%;
}
.swiper-wrapper {
  width: 50%;
}
.swiper-slide {
  text-align: center;
  width: auto;
}
.slide-image {
  height: 400px;
  width: auto;
}
.my-gallery figure {
  margin: 0px;
}
like image 170
Dustyn Altimus Avatar answered Sep 05 '25 04:09

Dustyn Altimus