Ivan Topić Ivan Topić - 6 months ago 61
Javascript Question

Showing multiple images with Owl carousel outside container

I am using Owl Carousel plugin to show 4 thumbnails in a row container (with Bootstrap). How do I show more thumbnails outside the container without changing 4 thumbnails inside container? I have seen this effect on a couple of websites, sadly I don't remember exactly where.

Images outside container are like in shadow until they enter inside and become visible. In image, blue thumbnails are regular images and those outside have opacity toned down or they have background color as overlay.

enter image description here

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

Add this to your styles:

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

Play with the values to your liking.