Swipe JS - 一次显示 3 张幻灯片

Question

我正在将 Swipe JS 用于移动应用程序，我想一次显示 3 张幻灯片（一个中央侧，两个半侧幻灯片 - 这样你就可以看到两边的下一张幻灯片）：

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

当我滑到下一张幻灯片时，幻灯片 0 留在那里，但幻灯片 1 只是移到顶部。我希望它使整个滑块移动，而不仅仅是左侧、中间和右侧。

我将如何实现这一目标？

.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

非常老的问题，但这对我有用：

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

这将导致两侧各有两张幻灯片，且主幻灯片居中。

SlidesPerView注意：您可以根据需要更改属性。

Answer 2

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

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

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