Zeige mehrere Bilder mit Owl Karussell außerhalb Container

Question

Ich benutze Owl Carousel Plugin, um 4 Thumbnails in einer Reihe Container (mit Bootstrap) anzuzeigen. Wie zeige ich mehr Thumbnails außerhalb des Containers, ohne 4 Thumbnails im Container zu ändern? Ich habe diesen Effekt auf einigen Webseiten gesehen, leider weiß ich nicht mehr genau wo.

Bilder außerhalb des Containers sind wie im Schatten, bis sie ins Innere kommen und sichtbar werden. Im Bild sind blaue Thumbnails reguläre Bilder und diejenigen außerhalb haben eine abgeschwächte Opazität oder sie haben eine Hintergrundfarbe als Overlay.

$('.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

diese in Ihre Stile:

.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; 
} 

Spielen mit den Werten nach Ihren Wünschen.