4

我正在将 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>
4

3 回答 3

7

老问题，但我刚刚使用 API 找到了答案，没有任何技巧。

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

var swiper = new Swiper('.swiper-container', {
        slidesPerView: 2,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 0,
        centeredSlides: true
    });
于 2015-12-11T03:24:32.463 回答
4

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

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

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

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

于 2020-04-27T12:36:23.660 回答
0

我一直在玩它，我的代码绝对不是最有效的方法，但它可以完成工作......

我的方法如下：

=> 任何三张放映幻灯片的 z-index 必须高于其他幻灯片，并且当前放映幻灯片的 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;
}
于 2013-09-14T07:10:20.173 回答