Swiper 幻灯片 - 显示上一张/下一张幻灯片的结束/开始，如 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. 对于最后一张幻灯片，右侧有一个空白区域，左侧有上一张幻灯片的末尾.

推荐答案

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

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.

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