滑动幻灯片-显示上一个/下一个幻灯片（如Airbnb Slider）的结束/开始？

Question

上方是的滑块Airbnb。有没有一种方法可以使Swiper获得类似的效果？

1. 对于第一张幻灯片，左边和下一张幻灯片的开始处都有空白。
2. 对于中间幻灯片，有上一张和下一张幻灯片的开始和结束。
3. 对于最后一张幻灯片，右侧有空白，左侧是上一张幻灯片的末尾。

Answer 1

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

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

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

Answer 2

它工作得很好，这就是我所做的@Marc Mintel

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

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

仅显示下一张幻灯片的一部分：（无 centerSlides）

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