jquery - 猫头鹰轮播，显示子绝对 div，超过父溢出隐藏 div

Question

我正在使用 owl carousel 2，我面临以下问题。

我有div一个名字的父母owl-stage-outer，它有overflow:hidden根据轮播的要求。

我有另一个孩子的div名字：（ribbon显示“新到货”和“大减价”）这是position: absolute我现在面临的问题，在旋转木马的第一个项目上，丝带隐藏是因为overflow: hidden

参考图像

我正在处理的链接

我已经尝试过此链接中提供的解决方案，但它只适用于直系子女。

提前致谢。

Answer 1

您可以添加margin-left: 25px;它的作品。

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

编辑 ：

其作品

加你这个container：

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

你的owl-stage-outer：

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

Answer 2

这是您可以尝试的修复方法（有点脏但有效）：

首先你删除overflow: hidden. .owl-carousel .owl-stage-outer它会在页面宽度的 100% 上显示所有滑块，是的。

但后来你设置position: relative;为.owl-carousel .owl-stage-outer而不是position: static;.

然后你:before像这样在它上面添加一个来隐藏左边的部分：

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

当然，您必须这样做:after才能隐藏正确的内容。

Answer 3

试试这个解决方案

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