使用Swiper JS滑块 - 我想将第一张幻灯片左对齐，并显示第二张幻灯片从屏幕上峰化

Question

我正在使用swiper JS设置为使用以下设置覆盖流。

var swiper = new Swiper('.swiper-container', { 
    pagination: '.swiper-pagination', 
    effect: 'coverflow', 
    grabCursor: true, 
    centeredSlides: true, 
    slidesPerView: 1, 
    loop: true, 
    coverflow: { 
     rotate: 40, 
     stretch: 0, 
     depth: 50, 
     modifier: 1, 
     slideShadows : false 
    } 
}); 

但是我想从屏幕的右侧显示下一张幻灯片的一部分（可能是20％）。我不想让幻灯片居中，但仍然想要覆盖三维效果。 这是一个我想如何看滑块的模型。

我明白任何帮助，您可以提供:)

Answer 1

把刷卡的容器，设置刷卡宽度你想活动幻灯片是（例如80％），以任何宽度和不要忘记设置overflow属性为swiper的visible以及容器的hidden。

(function($){ 
 
    $(document).ready(function(){ 
 
    var swiper = new Swiper('.swiper', { 
 
     effect: 'coverflow', 
 
     grabCursor: true, 
 
     slidesPerView: 1, 
 
     loop: true, 
 
     coverflow: { 
 
     rotate: 40, 
 
     stretch: 0, 
 
     depth: 50, 
 
     modifier: 1, 
 
     slideShadows : false 
 
     } 
 
    }) 
 
    }); 
 
})(jQuery);

.container { 
 
    width: 150px; 
 
    height: 100px; 
 
    padding: 20px 10px; 
 
    background-color: lightgrey; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
} 
 
.swiper { 
 
    width: 80%; 
 
    height: 100%; 
 
} 
 
.swiper-slide { 
 
    background: white; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="swiper"> 
 
    <div class="swiper-wrapper"> 
 
     <div class="swiper-slide"></div> 
 
     <div class="swiper-slide"></div> 
 
     <div class="swiper-slide"></div> 
 
     <div class="swiper-slide"></div> 
 
     <div class="swiper-slide"></div> 
 
    </div> 
 
    </div> 
 
</div>

唯一的问题是与loop: true参数为当上了最后一张幻灯片，下一张幻灯片似乎当滑动事件发生时，只能加。