前端之家

  1. 首页
  2. 问答

滑动幻灯片上一张幻灯片，同时捕捉到左侧

• 问答

在Swiper演示中，幻灯片会捕捉到屏幕的左侧，直到您获得最终的幻灯片为止，因为（我想）Swiper不想在右侧显示空白，因此无法将其捕捉到左侧：>

滑动幻灯片上一张幻灯片，同时捕捉到左侧

幻灯片10永远不会捕捉到左侧

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

在我看来，这对用户来说就像是个错误，特别是当您触发幻灯片滑动到幻灯片10且仅弹出到右侧时。

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

.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计算宽度。因此，内置或响应式解决方案将是更好的选择！

chengyi275 回答：滑动幻灯片上一张幻灯片，同时捕捉到左侧

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

您当前的解决方法可能是非常理想的，我不认为有任何内置的方法可以帮助您实现自己的目标。但是，您可以考虑使用loop: true选项，这样可以提供更好的用户体验。

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

carouselcssjavascriptresponsiveswiper
本文链接：https://www.f2er.com/3069025.html

大家都在问