In Swiper demos, slides snap to the left of the screen until you get to the final slides, which are prevented from snapping to left because (I presume) Swiper doesn't want to show whitespace down the righthand side:

Slide 10 will never snap to the left side

.html

In my opinion it feels like a bug to the user, especially when you trigger slide to slide 10 and it only pops into the right side.

The workarounds I've found are to either add a blank slide, or to add margin-right to the final slide, so then slide will snap to the left side:

.swiper-slide:last-child {
  margin-right: calc(100vw - 300px);
}

Add margin-right to last slide

Add blank slide at end

Use loop functionality and then hide duplicates

Is there a better or built-in way to do? this without having to use a workaround?

I want to change this spacing dynamically later and if you change it manually, then you have to call swiper.update() causing layout updates. Also my current workaround requires you to know the width of the slides, or use custom javascript to calculate the widths. So a built-in or responsive solution would be preferable!

In Swiper demos, slides snap to the left of the screen until you get to the final slides, which are prevented from snapping to left because (I presume) Swiper doesn't want to show whitespace down the righthand side:

Slide 10 will never snap to the left side

https://swiperjs./demos/120-slides-per-view-auto.html

In my opinion it feels like a bug to the user, especially when you trigger slide to slide 10 and it only pops into the right side.

The workarounds I've found are to either add a blank slide, or to add margin-right to the final slide, so then slide will snap to the left side:

.swiper-slide:last-child {
  margin-right: calc(100vw - 300px);
}

Add margin-right to last slide

https://codepen.io/kmturley/pen/ExxrGgw

Add blank slide at end

https://codepen.io/kmturley/pen/JjjzKrK

Use loop functionality and then hide duplicates

https://codepen.io/kmturley/pen/oNNVLxL

Is there a better or built-in way to do? this without having to use a workaround?

I want to change this spacing dynamically later and if you change it manually, then you have to call swiper.update() causing layout updates. Also my current workaround requires you to know the width of the slides, or use custom javascript to calculate the widths. So a built-in or responsive solution would be preferable!

• javascript
• css
• carousel
• responsive
• swiper.js

Share Improve this question Follow edited Nov 20, 2019 at 17:23 Kim T asked Nov 20, 2019 at 3:18 Kim TKim T 6,48222 gold badges6262 silver badges8484 bronze badges 2

• 1 you should add loop true.. so its slide continuously.. no more space in right side – Ranjith v Commented Nov 20, 2019 at 9:27
• Loop is not ideal as I want the blank space. I've tried adding loop and hiding the duplicate slides, but that allows you to keep looping, unless I replace the next/prev with custom functions – Kim T Commented Nov 20, 2019 at 17:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

try to add loopedSlides: 8, and remove margin-right: calc(100vw - 300px);

var container = document.getElementById('container');
var content = document.getElementById('content');
var swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  slidesPerView: 'auto',
  autoplayDisableOnInteraction: false,
  loopedSlides: 8,
});

Your current workaround probably is quite optimal and I don't htink there is any built in way to acheave what you are trying to do. However you could consider to use loop: true option and this could give a better user experience.

https://codepen.io/rentodesign/pen/gOOqNwo