滑动幻灯片-显示上一个/下一个幻灯片(如Airbnb Slider)的结束/开始? [英] Swiper slides - showing end/start of previous/next slides like Airbnb Slider?

问题描述

上方是Airbnb上的滑块.有没有办法通过 Swiper 来获得类似的效果?

Above is the slider from Airbnb. Is there a way to get a similar effect with Swiper?

1. 对于第一张幻灯片，左侧有一个空白区域，然后开始 下一张幻灯片.
2. 在中间幻灯片中，有上一张和第二张的开头和结尾 下一张幻灯片.
3. 最后一张幻灯片的右边是空白，而上一张幻灯片的末尾是左侧.

1. For the first slide, there is a blank space on the left and start of the next slide.
2. For the middle slide, there is the start and end of previous and next slides.
3. For the last slide, there is a blank space on the right and end of the previous slide on the left.

推荐答案

只需使用小数位设置slidesPerView选项，例如:

Just set the slidesPerView option using decimal places, eg:

var swiper = new Swiper('.swiper-container', {
    ...
    // this shows a bit of the previous/next slides
    slidesPerView: 1.1,
    centeredSlides: true,
    spaceBetween: 10,
    ...
});

只要您不将幻灯片设置为循环播放，那么第一张和最后一张幻灯片就会有多余的空间，而不是另一张幻灯片的一部分.

As long as you don't set the slideshow to loop then the first and last slides will have extra space instead of part of another slide.

这篇关于滑动幻灯片-显示上一个/下一个幻灯片(如Airbnb Slider)的结束/开始?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！