Swiper slides - showing end/start of previous/next slides like Airbnb Slider?

家住魔仙堡 提交于 2019-12-12 08:09:01

问题


Above is the slider from Airbnb. Is there a way to get a similar effect with Swiper?

  1. For the first slide, there is a blank space on the left and start of the next slide.
  2. For the middle slide, there is the start and end of previous and next slides.
  3. For the last slide, there is a blank space on the right and end of the previous slide on the left.

回答1:


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.



来源:https://stackoverflow.com/questions/38406690/swiper-slides-showing-end-start-of-previous-next-slides-like-airbnb-slider

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!