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.

Schaaff

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. – Tremml

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. – Schaaff

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;

Adduct

I also noticed the behavior only happens when using the GPU acceleration, so if the slidesPerView option has no effect you can try setting cssMode: 'true' (uses CSS transitions instead of the default GPU transitions). Other notes: check the loading order for your scripts/styles, and finally the swiper.js docs suggest avoiding margins on the slide containers for best results (I'm not sure why that would make a difference though). – Adduct

Answer 2

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.

Lifer

Actually I meant the homepage (idangero.us/swiper), but in that example it's happening too. – Schaaff

Can you use the console to query the viewport width and confirm that it's the same as that pixel width that's being applied to the swiper-slide div node? – Lifer

Yep, the viewport width matches the style="width: 2560px" that swiper applies to all slides. I'm confident it's a render issue. – Schaaff

I think someone on windows is going to need to step up. You don't see anything when inspecting via console? – Lifer

Answer 3

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.

Windsail

Answer 4

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

Aerostat

The thing is, the JS is inlining the viewport pixel width. But saw that too. – Lifer

That makes no difference, the issue remains. – Schaaff

Answer 5

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 .

Buine