Owl Carousel, show child absolute div, over parent overflow hidden div

Question

I am using owl carousel 2, I am facing following problem.

I have parent div with a name owl-stage-outer, it has overflow:hidden as per requirement of the carousel.

I have another child div name: ribbon (showing 'New Arrival' and 'Big Sale') which is position: absolute Now the problem which I am facing, on first item of carousel, ribbon is hiding because of overflow: hidden

reference image

Link on which I am working

I have tried solution provided in this link, but it will only work on immediate child.

Thanks in Advance.

Solution 1

You can add this margin-left: 25px; its works.

<div class="owl-item active" style="width: 240px;margin-right: 60px;margin-left: 25px;">

EDIT :

Its works

add this of you container :

<div class="container" style="
    width: 1220px;
    padding: 0 40px 0 40px;
    overflow: hidden;
">

of your owl-stage-outer :

<div class="owl-stage-outer" style="
    overflow: visible;
">

Solution 2

Here's a fix (kind of dirty but it works) that you can try :

First you remove overflow: hidden of .owl-carousel .owl-stage-outer. It will show all your slider on 100% of the width of the page, yes.

But then you set position: relative; to .owl-carousel .owl-stage-outer instead of position: static;.

Then you add a :before on it like this to hide the left part :

.owl-carousel .owl-stage-outer:before {
    content: "";
    background: #fff;
    position: absolute;
    width: 100%;
    height: 700px;
    left: -100%;
    margin-left: -20px;
    top: 0;
    z-index: 10;
}

Of course you have to do the same with :after to hide the right content.