Swiper not working when slides < slidesPerView

[iskyd]

This is a (multiple allowed):

• [x] bug

• [ ] enhancement

• [ ] feature-discussion (RFC)

• Swiper Version: Swiper 5.3.0

• Platform/Target and Browser Versions: Every browser

What you did

I have different breakpoint with different slidesPerView. When the total slides < slidesPerView, swiper is not working. This is how I create the swiper:

self.swiperFavourites = new Swiper ('#swiper-favourites', {
                        // Optional parameters
                        direction: 'horizontal',
                        loop: false,
                        slidesPerView: 4,
                        spaceBetween: 25,
                        breakpoints: {
                            320: {
                                slidesPerView: 1,
                                spaceBetweenSlides: 25
                            },
                            600: {
                                slidesPerView: 2,
                                spaceBetweenSlides: 25
                            },
                            991: {
                                slidesPerView: 3,
                                spaceBetweenSlides: 25
                            },
                            1240: {
                                slidesPerView: 3,
                                spaceBetweenSlides: 25
                            },
                            1600: {
                                slidesPerView: 4,
                                spaceBetweenSlides: 25
                            }
                        },
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        } 
                    })

For example when I have a resolution > 1600 and only 3 slides, swiper doesn't work.

[Paskalouis]

Any updates regarding this? This is happening to me too. Bad workaround is you add 'dummy slides' so the slides will be > slidesPerView

[kenzrad]

This worked for me when I set "watchOverflow: true" (as long as you keep loop as false). It does flash full-size before resizing to the slides-per-view dimensions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[vkiss]

I did a workaround this with this function:

const evaluateMaxNofChild = ( number ) => {
  const carouselChildren = document.querySelectorAll( ".swiper-container .swiper-slide" ).length;

  return ( number >= carouselChildren ? carouselChildren : number );
};

const mySwiper = new Swiper( ".swiper-container", {
      slidesPerView: 1,
      breakpoints: {
        320: {
          slidesPerView: evaluateMaxNofChild( 2 )
        },
        480: {
          slidesPerView: evaluateMaxNofChild( 3 )
        },
        1024: {
          slidesPerView: evaluateMaxNofChild( 6 )
        },
        1200: {
          slidesPerView: evaluateMaxNofChild( 8 )
        }
      }
    } );

[resqiar]

For everyone that still wonder how to solve this, I did a workaround with setting .swiper-wrapper width into fix width for example 100vw. Idk if this is a good workaround but it works for me.

.swiper-wrapper {
     width: 100vw;
}

[hieulau777]

For everyone that still wonder how to solve this, I did a workaround with setting .swiper-wrapper width into fix width for example 100vw. Idk if this is a good workaround but it works for me.

.swiper-wrapper {
     width: 100vw;
}

It's work perfectly mate, thanks a lot

[mrdexign]

For everyone that still wonder how to solve this, I did a workaround with setting .swiper-wrapper width into fix width for example 100vw. Idk if this is a good workaround but it works for me.

.swiper-wrapper {
     width: 100vw;
}

worked in my case perfectly , tnx

[nolimits4web]

Swiper v9 comes with fully reworked and now different loop functionality. If you have similar issues in Swiper 9, open a new issue with a CodeSandbox showing the issue.