Swiper slideTo last slide, whilst snapping to left hand side

Question

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.com/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!

you should add loop true.. so its slide continuously.. no more space in right side — Ranjith v
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

Ranjith v Ranjith v · Accepted Answer · 2019-11-20T09:31:52

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,
});

Swiper slideTo last slide, whilst snapping to left hand side

2 Answers