Swiper 幻灯片 - 显示上一张/下一张幻灯片的结束/开始，如 Airbnb Slider？

Posted 2023-02-18

【中文标题】Swiper 幻灯片 - 显示上一张/下一张幻灯片的结束/开始，如 Airbnb Slider？

【英文标题】：Swiper slides - showing end/start of previous/next slides like Airbnb Slider?

【发布时间】：2016-11-19 06:55:27

【问题描述】：

上方是来自Airbnb 的滑块。有没有办法用Swiper获得类似的效果？

对于第一张幻灯片，左边有一个空格，开始 下一张幻灯片。 对于中间幻灯片，有上一个和 下一张幻灯片。 对于最后一张幻灯片，右侧有一个空白区域，左侧有上一张幻灯片的末尾。

【问题讨论】：

this question有一个jquery解决方案。 create image slider that shows part of previous and next image Swiper 插件是否允许更简单地执行此操作？如果没有，那么是否可以使用 Angular 2 而不是 jquery 做同样的事情？

你有没有找到任何库来制作这样的轮播？这正是我正在寻找的。​​span>

【参考方案1】：

效果很好，@Marc Mintel 我就是这样做的

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

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

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

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

【参考方案2】：

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

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

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

【讨论】：

多么令人难以置信的功能，现在甚至可以与循环一起使用。

在我的例子中，这只显示了下一张幻灯片的一部分，而不是上一张。还有其他解决方案吗？

@MarcMintel 你想达到什么目的？如果您在播放第一张幻灯片时想要上一张幻灯片的一部分，则需要打开循环播放。

@MarcMintel 您还需要centeredSlides: true 属性才能显示第一张幻灯片。

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