CODEWITHSUNDEEP
mobileangularsliderionic2swiper.js
Dee
Dee

Reputation: 979

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

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.

Upvotes: 47

Views: 56388

Answers (2)

Fab
Fab

Reputation: 1190

It works pretty well, this how I did @Marc Mintel

To display part of prev slide & part of next slide :

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

To display part of next slide only : (no centeredSlides)

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

Upvotes: 18

atstormcup
atstormcup

Reputation: 1373

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.

Upvotes: 119

Related Questions