4

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.

xaid
  • 716
  • 1
  • 7
  • 18
  • How about removing overflow: hidden; property on .owl-carousel .owl-stage-outer ? – Vincent G Mar 24 '16 at 13:43
  • Currently I have only 2 items, if I will remove overflow then all items will be shown :) Reference of my template: http://202.141.243.212/fantasypartywebsite/misc/html/product_detail_page.php – xaid Mar 24 '16 at 13:51

3 Answers3

3

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

enter image description here

Greg
  • 826
  • 5
  • 21
  • Thanks Greg, but problem is, my client is not interest to move items box and should be align with the main container, because in some case there will be no 'New Arrival' ribbon so in that case it looks weird and not aligned with container :) – xaid Mar 24 '16 at 13:56
  • 1
    Thanks again buddy for quick support, answer accepted (Y) – xaid Mar 24 '16 at 14:54
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.

Vincent G
  • 8,547
  • 1
  • 18
  • 36
  • Thanks @Vincent, it's working for me but with one issue, if I am removing `overflow hidden`, then horizontal scroll is showing, but I have make body `overflow-y: hidden`, so cheers ;) – xaid Mar 24 '16 at 14:42
  • Yeah that's also why it's a dirty fix but it works :) Glad to help ! – Vincent G Mar 24 '16 at 14:48
  • @VincentG i tried your method but its not work for me what i have to do like i want this design but its have ribbon vertical so how i do that – Hassan Oct 09 '16 at 13:06
0

Try this solution

.owl-carousel .owl-stage-outer {
  margin: -25px;
  padding: 25px;
}
user1378373
  • 1