CODEWITHSUNDEEP
javascripthtmlslidergalleryswiper.js
mr.incredible
mr.incredible

Reputation: 4185

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?

Upvotes: 4

Views: 58532

Answers (3)

Muhammad Usman
Muhammad Usman

Reputation: 173

Instead of slidesPerView: 'auto', use this

breakpoints: {
      "@0.00": {
        slidesPerView: 1,
      },
      "@0.75": {
        slidesPerView: 2,
      },
      "@1.00": {
        slidesPerView: 3,
      },
      "@1.50": {
        slidesPerView: 4,
      },

Upvotes: 3

kachi_dk
kachi_dk

Reputation: 413

I had the same problem in Vue and Tailwind.

I solved it by adding slidesPerView:'auto' property on the wrapper and CSS width: fit-content; on the slides.

<Swiper slides-per-view="auto" :space-between="10">
   <SwiperSlide class="w-fit">
     ...
   </SwiperSlide>
</Swiper>

Upvotes: 1

Dustyn Altimus
Dustyn Altimus

Reputation: 336

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;
}

Upvotes: 9

Related Questions