Full width Swiper has a gap to the left of slides

Question

There is an issue with the Swiper plugin on Chrome for Windows with a big screen. It leaves empty gaps to the left of slides, I created a pen to demonstrate this:

https://codepen.io/anon/pen/BwMxWX

HTML:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

CSS:

.swiper-slide {
  width: 100vw;
  height: 300px;
}

.swiper-slide:nth-child(1) { background-color: lightpink; }
.swiper-slide:nth-child(2) { background-color: lightblue; }
.swiper-slide:nth-child(3) { background-color: lightgrey; }

JS:

new Swiper(".swiper-container", {
  loop: true
});

Keep in mind it only happens under those circumstances. Even if you're using Chrome on Windows, if the window size is less than (approximately) 2000px then it doesn't happen.

On the plugin's home page there is a full width example and the issue doesn't exist, but I don't really understand what's making it happen in the first place. Any help would be greatly appreciated.

UPDATE:

I found this only happens when using the "slide" effect, which is the default. Changing it to any other fixes it, but that's far from a solution.

Answer 1

Try setting slidesPerView: auto

const mySwiper = new Swiper('.swiper-container', {
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: 'true'
    },
    slidesPerView: 'auto', /* Set me! */  
});

Update:

This bug popped up again for me (even after making the above change) on some mobile Android devices. I added the following to the swiper's container and it seems to have fixed it for me:

overflow: hidden;