Swipe JS - Display 3 Slides at a time

Question

I'm using the Swipe JS for a mobile app, I want to display 3 slides at a time (well one central side, and two half slides at the side - so you can just about see the next slides on either side):

I've managed to get it so the slide layout are like this. Only issue is that if I start on 1, then 0 is on my left (great), but the last slide (6) is on the right, instead of 2.

And when I slide to the next slide, slide 0 stays there, but slide 1 just moves over the top. I want it so the entire slider moves, not just the left, centre and right.

How would I achieve this?

.swipe {
  overflow: visible;
  position: relative;
}
.swipe-wrap {
  overflow: visible;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  position: relative;
}

#myWrapper{
  overflow: hidden;
  width: 620px;
}


<div id='myWrapper'>
  <div id='mySwipe' style='max-width:300px;margin:0 auto' class='swipe'>
    <div class='swipe-wrap'>
      <div><b>0</b></div>
      <div><b>1</b></div>
      <div><b>2</b></div>
      <div><b>3</b></div>
      <div><b>4</b></div>
      <div><b>5</b></div>
      <div><b>6</b></div>
    </div>
  </div>
</div>

Answer 1

Old question but I've just found the answer using the API with no hacks.

The trick is to display 2 items, with a centered slides set to true.

var swiper = new Swiper('.swiper-container', {
        slidesPerView: 2,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 0,
        centeredSlides: true
    });

Answer 2

REALLY OLD question but this worked for me:

var swiper = new Swiper('.swiper-container', {
        centeredSlides: true,
        slidesPerView: 1.25,
        loop: true,
        spaceBetween: 50,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });
</script>

This will result in two slides on either sides with the main slide centered.

Note: You can change SlidesPerView property based on your need.