'Box shadow on items in owl carousel being cut off

I have got a box shadow on every element in my owl carousel. Problem is the outer most elements have their Box shadow cut off because of the overflow: hidden that owl-carousel utilizes. How can i get around this?

cssowl-carouselowl-carousel-2


Solution 1:[1]

To answer my own question. A workaround for this would be to set overflow: visible on the outer stage. Hiding all none active elements with opacity 0 and then for smoothness transition the opacity.

.owl-stage-outer { 
overflow: visible;
}

 .owl-item {
   opacity: 0;
   transition: opacity 500ms;
}
.owl-item.active {
  opacity: 1;
}

.

Solution 2:[2]

Or you can try add margin to class:

.owl-stage{
    margin: 30px;}

Solution 3:[3]

A bit late to the answers on this but for anyone still wondering:

Assuming this a carousel of multiple items, add some margin to the owl stage wrapper: 

.owl-stage{
  margin: 24px;
  overflow: visible;
}

Then only apply the box shadow to the active items, with a transition for effect on change: 

.owl-item {
   box-shadow: 0;
   transition: 1s all;
   webkit-transition: 1s all;
}
.active {
   box-shadow: 0 0 14px 0 rgba(74,74,74,0.20);
}

In my case I had a carousel of three items so when the box shadow was applied to owl items it was messy and looked cut off, the method above rectifies that.

Solution 4:[4]

This was layout of my OwlSlider

What i did to give a box-shadow, i gave same margin to my 'Item (default owl class) class' as much as i want shadow blur and remove the margin according to your design from owl plugin.

in my design i wanted 30px gap between items. so i set margin to 0 in owl plugin as i gave 15px margin to item class in my style.css so i got 30px margin.

solution css code for layout

Solution 5:[5]

What i did was adding stagePadding: 30 to carousel intilization options. as described in this Link.

with that i simply add margin to carousel stage and shadow on carousel items: 

    .owl-stage {
        margin: 25px 0px;
        overflow: visible;
    }

    .owl-item.active {
        -webkit-box-shadow: 0px 0px 15px 0px rgba(107, 107, 107, 1);
        -moz-box-shadow: 0px 0px 15px 0px rgba(107, 107, 107, 1);
        box-shadow: 0px 0px 15px 0px rgba(107, 107, 107, 1);
    }

This applies to all items a fine Box Shadow.

Hope this helps. :)

Solution 6:[6]

In my case this solve the problem:

css

   .owl-item {
        margin-bottom: 130px ;
    }
    .owl-item:first-child {
        padding-left: 10px;
    }
    .owl-item:last-child {
        padding-right: 10px;
    }

js

$(document).ready(function () {
    var owl = $('.owl-carousel');
    owl.owlCarousel({
        margin: 30            
    });

Solution 7:[7]

   $('.blog-wrap').owlCarousel({
    items: 2,
    loop:true,
    margin: 0,
    autoplay: false,
    nav: true,
    navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});

.owl-item{
  padding: 25px;
}

Add List Item Div will contain the box shadow example:

.single-entry { box-shadow: 11px 11px 35px rgba(71, 71, 71, 0.3) }

Solution 8:[8]

I think this is the better solution

.owl-stage-outer { margin: -15px; padding: 15px; }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kristian Nissen
Solution 2 mrKorny
Solution 3 Jon Bennett
Solution 4 parth patel
Solution 5 Arslan Ameer
Solution 6 Oleg
Solution 7 Tariqul_Islam
Solution 8 Martijn097

Related Questions