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

时间:2019-11-20 03:18:59

标签: javascript css carousel responsive swiper

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

enter image description here

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

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

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

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

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

enter image description here

在上一张幻灯片上添加页边空白

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

在末尾添加空白幻灯片

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

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

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

是否有更好的或内置的方法?无需使用替代方法?

我想稍后动态更改此间距,如果手动更改,则必须调用swiper.update()导致布局更新。另外,我当前的解决方法还要求您了解幻灯片的宽度,或使用自定义的javascript计算宽度。因此,内置或响应式解决方案将是更好的选择!

2 个答案:

答案 0 :(得分:1)

尝试添加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,
});

答案 1 :(得分:0)

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

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