滑动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

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

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

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

Answer 2

我在玩的时候，我的代码绝对不是最有效的方法，但它能完成工作.......

我的方法如下。

=>任意三张幻灯片的z-index必须高于其他幻灯片，当你点击 "prev "或 "next "按钮时，当前幻灯片的z-index会增加。

=>特殊情况下，中间幻灯片的索引是 "0 "或 "6"。假设你的中间幻灯片在点击了六次 "下一张 "按钮后变成了 "0"，那么幻灯片 "1 "和 "6 "的z-index将与幻灯片 "0 "具有相同的度数，很好！但是当你点击 "前一张 "按钮时发生了什么？ 幻灯片 "0 "的z-index实际上比幻灯片 "1 "低。因此，'0'(第一张)和'6'(最后一张)的目标幻灯片必须被特殊处理。

希望能帮到你:)

//JQuery
window.mySwipe = $('#mySwipe').Swipe().data('Swipe');
var numClick = 0;
$("#next").bind('click',function(){
    numClick += 1;
    indexSwipe = mySwipe.getPos();
    curIndex = "#index"+indexSwipe;
    preIndex = "#index"+(indexSwipe-1);
    nextIndex = "#index"+(indexSwipe+1);
    if(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);
    }else{
    $(indexSwipe).css("z-index",numClick);
    $(preIndex).css("z-index",numClick);
    $(nextIndex).css("z-index",numClick);
    }
});

$("#prev").bind('click',function(){
    numClick += 1;
    indexSwipe = mySwipe.getPos();
    curIndex = "#index"+indexSwipe;
    preIndex = "#index"+(indexSwipe-1);
    nextIndex = "#index"+(indexSwipe+1);
    if(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);
    }else{
    $(indexSwipe).css("z-index",numClick);
    $(preIndex).css("z-index",numClick);
    $(nextIndex).css("z-index",numClick);
    }
});


<!--HTML-->
<div style='text-align:center;padding:5px 0px;'>
<button id="prev" onclick='mySwipe.prev();return false;'>&LT;</button>&nbsp;&nbsp; 
<button id="next" onclick='mySwipe.next();return false;'>&GT;</button>
</div>

<div id='myWrapper'>
  <div id='mySwipe' style='max-width:300px;margin:0 auto' class='swipe'>
    <div class='swipe-wrap'>
      <div id="index0"><b>0</b></div>
      <div id="index1" style="z-index:1;"><b>1</b></div>
      <div id="index2"><b>2</b></div>
      <div id="index3"><b>3</b></div>
      <div id="index4"><b>4</b></div>
      <div id="index5"><b>5</b></div>
      <div id="index6"><b>6</b></div>
    </div>
</div>
</div><!-- /myWrapper -->

<-- .css -->
.swipe {
overflow: visible;
visibility: hidden;
position: relative;
}

.swipe-wrap {
overflow: visible;
position: relative;
}

.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}


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

Answer 3

很老的问题，但这个问题对我很有用。

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

这将导致两边有两个幻灯片，主幻灯片居中。

注意：你可以改变 SlidesPerView 根据你的需要，财产。