Box shadow on items in owl carousel being cut off

Question

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?

Beasley

make .owl-carousel overflow: visible – Shriver

That would beat the purpose of the overflow: hidden wouldn't it? I don't want the hidden elements to be visible. I just want my box shadow – Beasley

working example please – Bailable

as many great stackoverflowers before have reminded me, please create a MCVE stackoverflow.com/help/mcve – Tankoos

Yeah, i was going to. But realized it was too much work. I went with a workaround that suited me nicely. – Beasley

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

.

Beasley

.owl-stage-outer { overflow: visible; } ruined my page width; I do not recommend this solution if your using bootstrap. – Tantalite

I was using bootstrap aswell. How did it ruin your page? – Beasley

If you have more items than are visible onscreen, they will all show if you make .owl-stage-outer show all overflow.. – Casefy

Notice i hide the none active owl-items. – Beasley

Answer 2

Or you can try add margin to class:

.owl-stage{
    margin: 30px;}

Acrilan

Answer 3

I think this is the better solution

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

Chantey

Answer 4

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.

Bilection

I don't think this is the solution. Adding margin to every owl-stage item, resulted in the most left item pressing everything to the right, leaving me with an huge white space gap. – Tantalite

Answer 5

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

Shontashoo

Answer 6

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. :)

Abutilon

Doesn't prevent shadow on the outer items from being cut off. – Tantalite

Its doesn't. Works fine for me. – Abutilon

When you add stagePadding you add an part of the next owl element to the start and end. 'Fixing' it by showing the next owl element is not an fix. Removing stagePadding cause the shadow to be cut off. – Tantalite

There are different ways to cope with such issue. Either add margin or padding on owl-stage class. In my case i had margin between 4 owl items of about 30px. I am using this technique very often where required. – Abutilon

Answer 7

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

Helico

Answer 8

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

Brusquerie

Answer 9

Here is my dirty way

css
.section__inner {
  margin-left: -12px;
}

.section__inner .owl-stage-outer {
  overflow: hidden;
  margin-right: -12px;
  padding-left: 12px;
  padding-top: 12px;
}

Now you have 12px (depend on you) space for ever card. Adjust the box shadow within it.

Slushy