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

我正在使用滑动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>

。轻扫{
溢出：可见；
位置：相对位置；
}
.刷包{
溢出：可见；
位置：相对位置；
}
.轻扫包裹>div{
浮动：左；
位置：相对位置；
}
#包装纸{
溢出：隐藏；
宽度：620px；
}
0
1.
2.
3.
4.
5.
6.

我一直在玩弄它，我的代码肯定不是最有效的方式，但它完成了任务

我的做法如下：

=>任何三张放映幻灯片的z指数必须高于其他幻灯片，当前放映幻灯片的z指数随着您单击“上一页”或“下一页”按钮而增加

=>特殊情况是中间幻灯片的索引为“0”或“6”。单击“下一步”按钮六次后，假设中间幻灯片现在为“0”。幻灯片“1”和“6”的z索引将与幻灯片“0”具有相同的度数，太好了！！但是当你点击“prev”按钮时发生了什么？幻灯片“0”的z索引实际上比幻灯片“1”低。因此，必须对“0”（第一个）和“6”（最后一个）靶向幻灯片进行特殊处理

希望这有帮助：）

//JQuery
window.mySwipe=$（'#mySwipe'）.Swipe（）.data（'Swipe'）；
var numClick=0；
$（“#下一步”）.bind（'click'，function（）{
numClick+=1；
indexsweep=mysweep.getPos（）；
curIndex=“#index”+索引；
preIndex=“#index”+（index-1）；
nextIndex=“#index”+（indexSwipe+1）；
如果（indexSwipe==0）{
$（curIndex）.css（“z-index”，numClick）；
$（“#index6”）.css（“z-index”，numClick）；
$（nextIndex）.css（“z-index”，numClick）；
}else if（indexSwipe==6）{
$（curIndex）.css（“z-index”，numClick）；
$（“#index5”）.css（“z-index”，numClick）；
$（“#index0”）.css（“z-index”，numClick）；
}否则{
$（indexsweep）.css（“z-index”，numClick）；
$（preIndex）.css（“z-index”，numClick）；
$（nextIndex）.css（“z-index”，numClick）；
}
});
$（“#prev”）.bind（'click'，function（）{
numClick+=1；
indexsweep=mysweep.getPos（）；
curIndex=“#index”+索引；
preIndex=“#index”+（index-1）；
nextIndex=“#index”+（indexSwipe+1）；
如果（indexSwipe==0）{
$（curIndex）.css（“z-index”，numClick）；
$（“#index6”）.css（“z-index”，numClick）；
$（nextIndex）.css（“z-index”，numClick）；
}else if（indexSwipe==6）{
$（curIndex）.css（“z-index”，numClick）；
$（“#index5”）.css（“z-index”，numClick）；
$（“#index0”）.css（“z-index”，numClick）；
}否则{
$（indexsweep）.css（“z-index”，numClick）；
$（preIndex）.css（“z-index”，numClick）；
$（nextIndex）.css（“z-index”，numClick）；
}
});
<；
&燃气轮机；
0
1.
2.
3.
4.
5.
6.
.刷卡{
溢出：可见；
可见性：隐藏；
位置：相对位置；
}
.刷包{
溢出：可见；
位置：相对位置；
}
.轻扫包裹>div{
浮动：左；
宽度：100%；
位置：相对位置；
}
#包装纸{
溢出：隐藏；
能见度：可见；
宽度：620px；
}

这是一个老问题，但我刚刚使用API找到了答案，没有任何漏洞

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

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

---

这是一个很老的问题，但对我来说很有用：

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

var swiper=新的swiper（“.swiper容器”{
中心幻灯片：对，
slidesPerView:1.25，
循环：对，
间隔：50，
分页：{
el:“.swiper分页”，
可点击：正确，
},
});

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

注意：您可以根据需要更改

SlidesPerView

属性

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