Swiper slide - 显示Airbnb Slider之前/下一张幻灯片的结束/开始？

Question

以上是Airbnb的滑块。有没有办法让Swiper得到类似的效果？

1. 对于第一张幻灯片，左侧有一个空白区域并开始 下一张幻灯片。
2. 对于中间幻灯片，有上一个和之前的开始和结束 下一张幻灯片
3. 对于最后一张幻灯片，左侧上一张幻灯片的右侧和末尾有一个空白区域。

Answer 1

效果很好，这就是我@Marc Mintel的方式

要显示上一张幻灯片的一部分和下一张幻灯片的一部分：

var swiper = new Swiper('.swiper-container', { slidesPerView: 1.1, centeredSlides: true, spaceBetween: 20, });

仅显示下一张幻灯片的一部分：（不显示居中幻灯片）

var swiper = new Swiper('.swiper-container', { slidesPerView: 1.1, spaceBetween: 20, });

Answer 2

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

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

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