42

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.
Huy Nguyen
  • 2,025
  • 3
  • 25
  • 37
Dee
  • 909
  • 3
  • 10
  • 18
  • There is a jquery solution at this question. [create image slider that shows part of previous and next image](http://stackoverflow.com/questions/9693492/create-image-slider-that-shows-part-of-previous-and-next-image?) Does the Swiper plugin allows to do this more simply? If not, then would it be possible to do the same thing with Angular 2 instead of jquery? – Dee Jul 16 '16 at 19:55
  • Did you find any lib to make carousel like this? This is exactly what I'm looking for. – Huy Nguyen Mar 03 '17 at 03:01

2 Answers2

102

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.

atstormcup
  • 1,203
  • 1
  • 9
  • 8
  • 14
    What an incredible feature, even works with loop now. – Francisco Aquino Mar 17 '20 at 05:51
  • In my case this only shows part of the next slide, but not of the previous one. Is there another solution? – ccc1da70-5e63-4879-a4cb-adb604 May 25 '20 at 12:21
  • @MarcMintel what are you trying to achieve? If you want part of the previous slide while you're on the first one, then you need to turn on looping. – atstormcup Jun 17 '20 at 05:12
  • @MarcMintel you also need the `centeredSlides: true` property to have the first slide showing. – Visualise Jul 13 '20 at 01:57
  • 1
    For avoiding "the first slides will have extra space instead of part of another slide" just use {centeredSlides: true} rather centeredSlides. This setting without having loop enable is the best experience. Show extra part of next and when reach the last slide just show extra part of the first one. – QMaster Aug 19 '20 at 23:59
  • 2
    Using `centeredSlides: true` can I somehow get rid of the extra spaces on the first and last slide which are now centered instead of starting and ending where they do when not centered? -> FOUND IT: use `centeredSlidesBounds: true` :) – Dollique Sep 23 '22 at 08:10
  • Also ensure you have your image set to `width: 100%;` to ensure it's taking up the full container width. – Shane Muirhead Oct 25 '22 at 11:20
  • When setting loop:true I also had to set loopedSlides:2 to ensure that the partially visible slide at the left-hand side of the carousel doesn't disappear during transitions (Swiper 9) – Jonathan Nicol May 08 '23 at 04:17
14

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, });

Fab
  • 1,080
  • 12
  • 19