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

Dee picture Dee · Jul 16, 2016 · Viewed 11.3k times · Source

Airbnb Slider

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.

Answer

atstormcup picture atstormcup · Sep 15, 2017

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.