Owl Carousel 2 problem with overflow hidden

[psytanium]

Hello,

I used owl carousel, but this script have serious problem, it dont allow you to display absolute child, because of forced overflow:hidden. e.g. I’m using Tooltips on hover, Owl Carousel prevent anything to show up outside its sliding frame.

Im using this simple tooltip :https://www.w3schools.com/css/css_tooltip.asp

If someone want to give it a try, open this website https://www.woodandgas.com/products_filter.php?cPath=35_42_51&sort=6a
Then hover over Shapes > Horizontal

You will see the balloon Tooltip showing up, but disappear when outside Owl slider stage.

Thanks, I appreciate your solutions, applied on Owl or on Tooltip css.

[Atelierbram]

when overruling the overflow: hidden with overflow: initial on .owl-carousel .owl-stage-outer, this will work for showing the tooltip popup. Now set overflow: hidden on #bodyContent to keep the slider from overflowing.

.owl-carousel .owl-stage-outer {
    /* override */
    overflow: initial;
}

#bodyContent {
    /* override */
    overflow: hidden;
}

[psytanium]

I did what u suggest, but the slider is showing over the edges, between the slider stage and body content, like 100px from each sides, left and right.

[Atelierbram]

Can you edit the CSS in the live website: the link you posted earlier? It works for me in DevTools …

[psytanium]

I can edit the website files, i did what u suggest. img -> https://ibb.co/hqdvS9

[Atelierbram]

OK I see … but why not try:

.owl-item {
  opacity: 0;
}
.owl-item.active {
  opacity: 1;
}

[psytanium]

That was almost done.. it worked but the slide is visible ONLY when you click to scroll or you drag it. I did your solution and uploaded the CSS file, try it. btw thank you for trying.

I’m confused how a popular carousel like Owl have this serious problem, people complains allover the forums about this issue.

[Atelierbram]

I just checked on the website, and it seems to work … problem solved?

If you are looking for an alternative slider, searching for “flickity slider metafizzy” will lead to a well maintained responsive slider that will work in all modern browsers.

But most sliders will have overflow: hidden, at the least on the outermost container, that is just the way they work with absolute positioning and javaScript. So one way to tweak this in general is to wrap the slider in an extra div giving it the padding needed to make room for overflows, popups and the like, and move the overflow: hidden declaration from the slider to that new wrapper div.

[psytanium]

I wish it is solved, this problem is puzzling.

When you click the Next / Prev buttons, the items slides, at this moment when they move (left / right) they will appear outside the box. Until the movement complete.

Apparently all the available sliders work the same, its not only the hidden overflow attribute a problem, there is some translate3d on many divs as part of the problem.

Do you think we can move the tooltip outside the slider ?

[Atelierbram]

Do you think we can move the tooltip outside the slider ?

That’s feels like over-complicating things.

For me having a transition on the opacity makes it look better, and in a way also more natural:

.owl-item {
    opacity: 0;
    transition: opacity .75s linear;
}

[Author]

Posts