Question

我使用Swipe JS作为移动应用程序，我想一次显示3张幻灯片（一个中央一侧，两侧有两个幻灯片 - 所以你可以看到下一张幻灯片任何一方）：

enter image description here

我设法得到它，所以幻灯片布局是这样的。唯一的问题是如果我从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

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

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

这将导致两侧的两张幻灯片，主幻灯片居中。

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

Answer 3

我正在玩它，我的代码绝对不是最有效的方式，但它完成了工作......

我的方法如下：

=＆gt;任何三个显示幻灯片的z-index必须高于其他幻灯片，并且当您点击“prev”或“next”按钮时，当前显示幻灯片的z-index会增加。

=＆gt;特殊情况是中间幻灯片的索引为“0”或“6”。在点击“下一步”按钮六次后，说中间幻灯片现在为“0”。幻灯片'1'和'6'的z-index将与幻灯片'0'具有相同的程度，太棒了!!但是当你点击'上一步'按钮时发生了什么？ slide'0的z-index实际上低于滑动'1'。 Ergo，'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;
}

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

3 个答案: