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?


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;
} {
  opacity: 1;


Answered By – Kristian Nissen

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.