Ivan Topić Ivan Topić - 2 years ago 255
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

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,

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


Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download