javascript - 滑动 JS - 一次显示 3 张幻灯片

Question

我正在为移动应用程序使用 Swipe JS，我想一次显示 3 张幻灯片(好吧，一张中间的一面，两半的幻灯片在旁边 - 这样你就可以在两边看到下一张幻灯片):

我设法得到它，所以幻灯片布局是这样的。唯一的问题是，如果我从 1 开始，那么 0 在我的左边(很好)，但最后一张幻灯片 (6) 在右边，而不是 2。

当我滑到下一张幻灯片时，幻灯片 0 停留在那里，但幻灯片 1 只是移到顶部。我想要它让整个 slider 移动，而不仅仅是左、中和右。

我将如何实现这一点？

.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

老问题，但我刚刚使用 API 找到了答案，没有任何黑客攻击。

诀窍是显示 2 个项目，并将居中的幻灯片设置为 true。

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