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?

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 — Kristian Nissen, Jan 18 '18 at 12:35
as many great stackoverflowers before have reminded me, please create a MCVE https://stackoverflow.com/help/mcve — Akin Hwan, Jan 18 '18 at 15:04
Yeah, i was going to. But realized it was too much work. I went with a workaround that suited me nicely. — Kristian Nissen, Jan 19 '18 at 01:39

score 11 · Accepted Answer · answered Jan 19 '18 at 01:43

11

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

.

answered Jan 19 '18 at 01:43

Kristian Nissen

1,153
2
11
29

3

`.owl-stage-outer { overflow: visible; }` ruined my page width; I do not recommend this solution if your using bootstrap. – John Sep 12 '19 at 15:21
I was using bootstrap aswell. How did it ruin your page? – Kristian Nissen Sep 13 '19 at 07:36
If you have more items than are visible onscreen, they will all show if you make .owl-stage-outer show all overflow.. – Jay McVety Feb 13 '20 at 15:59
1

Notice i hide the none active owl-items. – Kristian Nissen Feb 13 '20 at 17:23

score 4 · Answer 2 · answered May 09 '18 at 19:50

4

Or you can try add margin to class:

.owl-stage{
    margin: 30px;}

answered May 09 '18 at 19:50

mrKorny

91
8

score 1 · Answer 3 · answered May 08 '19 at 08:39

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.

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. — John, Sep 12 '19 at 15:28

score 1 · Answer 4 · answered May 14 '20 at 06:15

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

score 1 · Answer 5 · answered May 05 '22 at 12:17

1

I think this is the better solution

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

answered May 05 '22 at 12:17

Martijn097

21
2

score 0 · Answer 6 · answered May 19 '19 at 17:08

0

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

answered May 19 '19 at 17:08

Arslan Ameer

1,010
16
30

Doesn't prevent shadow on the outer items from being cut off. – John Sep 12 '19 at 15:29
Its doesn't. Works fine for me. – Arslan Ameer Sep 12 '19 at 15:38
1

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. – John Sep 12 '19 at 16:17
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. – Arslan Ameer Sep 12 '19 at 16:25

score 0 · Answer 7 · answered Sep 20 '19 at 01:12

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

score 0 · Answer 8 · answered Mar 18 '20 at 15:38

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

score 0 · Answer 9 · answered Jun 29 '23 at 07:25

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.

Box shadow on items in owl carousel being cut off

9 Answers9