使用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參數爲當上了最後一張幻燈片，下一張幻燈片似乎當滑動事件發生時，只能加。