javascript - Swiper slideTo 最后一张幻灯片，同时捕捉到左侧

Question

在 Swiper 演示中，幻灯片会吸附到屏幕左侧，直到您到达最后一张幻灯片为止，因为(我推测)Swiper 不想在右侧显示空白，因此无法吸附到左侧:

幻灯片 10 永远不会吸附到左侧

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

在我看来，这对用户来说感觉像是一个错误，尤其是当您触发滑动到幻灯片 10 并且它只弹出到右侧时。

我发现的解决方法是添加一张空白幻灯片，或者在最后一张幻灯片上添加 margin-right，这样幻灯片就会对齐到左侧:

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

在最后一张幻灯片上添加 margin-right

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

在末尾添加空白幻灯片

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

使用循环功能然后隐藏重复项

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

有更好的或内置的方法吗？这无需使用解决方法？

我想稍后动态更改此间距，如果您手动更改它，则必须调用 swiper.update() 导致布局更新。此外，我当前的解决方法要求您知道幻灯片的宽度，或使用自定义 javascript 来计算宽度。因此，内置或响应式解决方案会更可取!

Answer 1

尝试添加 loopedSlides: 8，并删除 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,
});