滑动滑动到最后一张幻灯片，同时捕捉到左侧答案

【问题标题】：Swiper slideTo last slide, whilst snapping to left hand side滑动滑动到最后一张幻灯片，同时捕捉到左侧
【发布时间】：2019-11-20 03:18:59
【问题描述】：

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

为最后一张幻灯片添加右边距

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

在末尾添加空白幻灯片

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

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

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

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

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

【问题讨论】：

你应该添加循环真..所以它连续滑动..右侧没有更多空间
循环并不理想，因为我想要空白空间。我试过添加循环并隐藏重复的幻灯片，但这可以让你继续循环，除非我用自定义函数替换下一个/上一个

标签： javascript css carousel responsive swiper

【解决方案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,
});

【讨论】：

嗯，这似乎不起作用？ loopedSlides不需要和loop一起使用吗？
启用循环后，您可以继续点击箭头并最终返回到幻灯片 1，因此并不理想。但如此接近！
看起来你可以禁用箭头，然后就可以了！ codepen.io/kmturley/pen/oNNVLxL
如果你添加循环意味着..不需要loopedslides 8..只需尝试添加循环它的工作正常@Kim T

【解决方案2】：

您当前的解决方法可能非常理想，我不认为有任何内置方法可以实现您正在尝试做的事情。但是您可以考虑使用loop: true 选项，这样可以提供更好的用户体验。

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

【讨论】：

我确实尝试了循环，但就我而言，我不想看到重复的幻灯片。我想我可以用 css 隐藏它们。