Owlカルーセルをコンテナの外側に複数表示する

Question

Owl Carouselプラグインを使用して、行コンテナに4つのサムネイルを表示しています（ブートストラップ付き）。コンテナ内のサムネイルを4つ変更せずに、サムネイルをコンテナの外側にさらに表示するにはどうすればよいですか？私はいくつかのウェブサイトでこの効果を見てきましたが、悲しいことに私はどこを正確に覚えていません。

コンテナの外側の画像は、内側に入って目に見えるようになるまで影に似ています。画像では、青色のサムネイルは通常の画像であり、外側の画像は不透明度が下がっているか、背景色がオーバーレイとして表示されています。

$('.owl-carousel').owlCarousel({ 
    loop:true, 
    margin:10, 
    nav: true, 
    navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'], 
    dots: false, 
    autoplay: true, 
    autoplayTimeout: 3200, 
    autoplaySpeed: 2000, 
    responsive:{ 
     0:{ 
     items:1 
     }, 
     600:{ 
     items:4 
     } 
    } 
    }) 


<div class="container"> 
     <ul class="owl-carousel"> 
     <li> 
      <figure> 
      <img src="http://placehold.it/350x150" alt="" /> 
      </figure> 
     </li> 
     </ul> 
</div> 

http://codepen.io/anon/pen/MyLOrq

Answer 1

あなたのスタイルにこれを追加します。お好みに合わせて値を持つ

.owl-carousel .owl-stage-outer { 
    overflow: visible; 
} 
.owl-carousel .owl-stage-outer .owl-item { 
    opacity: 0.25; 
    transition: opacity 0.5s ease-out; 
} 
.owl-carousel .owl-stage-outer .owl-item.active { 
    opacity: 1; 
} 

プレイ。