Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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.
like image 346
Dee Avatar asked Jul 16 '16 00:07

Dee


1 Answers

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.

like image 187
atstormcup Avatar answered Oct 08 '22 13:10

atstormcup