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:

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.

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.

• javascript
• css
• swiper.js

• i tried spoofing the resolution on chrome to 3840 x 2140 (i am on a Mac 13). But i am not getting any white space to the left , any specific resolution to target? i may try on a big screen once i hit work. – semuzaboi Commented Oct 19, 2017 at 13:57
• I'm using an iMac with Windows to test it (2560x1440) and it only happens with Chrome and when the window width is around 2000px, less than that and it doesn't happen. It's also fine if I spoof the width with dev tools, so that's not going to help you see it. – SoKeT Commented Oct 19, 2017 at 14:11

5 Answers 5

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;

If this is the demo in question: http://idangero.us/swiper/demos/010-default.html, The only difference I can see is the default width setting on spier-slide is set to 100%, and then overridden via inline JS to the pixel width of the viewport. Your codepen has it initially set (as you note) to 100vw.

.swiper-slide {
  width: 100%;
}

Not on windows, but poking around.

If anyone STILL have this issue try setting the spaceBetween to any value higher than 0. None of the other solutions solved this problem for me but this one did.

I would first try changing the width in the .swiper-slide to 100%. The view window and % aren't one-for-one. So, 100vw would not equal 100%. Here's a reference page: https://teamtreehouse.com/community/viewport-units-vs-percentages

This is old question,in case someone still looking for the answer,you just need to add "loop:true" option, this should fill in the empty white space .