Swiper幻灯片 - 如何像Airbnb滑块一样显示上一个/下一个幻灯片的末尾/开头？

Question

以上是来自 Airbnb 的滑块。是否有办法使用 Swiper 实现类似的效果？

1. 对于第一张幻灯片，左侧和下一张幻灯片的开始处留有空白。
2. 对于中间的幻灯片，上一张和下一张幻灯片的开头和结尾都有展示。
3. 对于最后一张幻灯片，右侧和前一张幻灯片的结尾以及左侧留有空白。

- Dee

---

这个问题有一个jQuery的解决方案。创建图像滑块，显示前一张和后一张图像的部分Swiper插件是否可以更简单地实现这个功能？ 如果不行，那么是否可以使用Angular 2代替jQuery来完成同样的事情？ - Dee

你找到任何类库可以制作这样的轮播图吗？这正是我正在寻找的。 - Huy Nguyen

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,
    ...
});

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

- atstormcup

---

太棒了，这个功能现在甚至支持循环。 - Francisco Aquino

在我的情况下，这只显示了下一张幻灯片的一部分，而不是上一张幻灯片的任何内容。是否有其他解决方案？ - ccc1da70-5e63-4879-a4cb-adb604

为了避免“第一张幻灯片会有额外的空间而不是另一张幻灯片的一部分”，只需使用{centeredSlides: true}而不是centeredSlides。这个设置在没有启用循环的情况下是最好的体验。显示下一个幻灯片的额外部分，当到达最后一张幻灯片时，只显示第一张幻灯片的额外部分。 - QMaster

使用 centeredSlides: true，我能否通过某种方式摆脱第一张和最后一张幻灯片上的额外空间，因为它们现在是居中的，而不是像没有居中时那样开始和结束？-> 找到了：使用 centeredSlidesBounds: true :) - Dollique

还要确保将图像设置为 width: 100%;，以确保它占用整个容器的宽度。 - Shane Muirhead

Answer 2

我的方法非常有效，这是我做的@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, });

- Fab