スワイパーJSスライダーを使用する - 最初のスライドを左に整列させ、オフスクリーンから2番目のスライドのピークを表示したい

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％）が表示されます。スライドを中央に置いてはいないが、3D効果をカバーしたいと思っています。 ここでは、スライダをどのように見せたいかを模擬しています。

私はあなたが提供することができます任意の助けに感謝:)

Answer 1

容器にswiperを入れて、あなたはアクティブなスライドは、（例えば80％）であることを、好きな幅にswiper幅を設定し、 overflowプロパティをスワイパの場合は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パラメータとなり、次のスライドは、スライドのイベントが発生したときにのみ追加されているように見えます。