Reputation: 1184

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?

Upvotes: 9

Answers (9)

haotrg035

Reputation: 89

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.

Upvotes: 0

Martijn097

Reputation: 31

I think this is the better solution

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

Upvotes: 2

parth patel

Reputation: 11

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

Upvotes: 1

Tariqul_Islam

Reputation: 567

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

Upvotes: 0

Oleg

Reputation: 1140

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

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

Upvotes: 0

Arslan Ameer

Reputation: 1120

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

Upvotes: 0

Jon Bennett

Reputation: 441

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.

Upvotes: 1

mrKorny

Reputation: 91

Or you can try add margin to class:

.owl-stage{
    margin: 30px;}

Upvotes: 4

Kristian Nissen

Reputation: 1184

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

Upvotes: 12

Box shadow on items in owl carousel being cut off

Answers (9)

Related Questions