猫头鹰旋转木马，显示孩子绝对div，超过父母溢出隐藏div

Question

我正在使用猫头鹰旋转木马2，我正面临以下问题。

我的父级div的名称为owl-stage-outer，根据轮播的要求，它有overflow:hidden。

我有另一个孩子div名称：ribbon（显示'新到货'和'大甩卖'）position: absolute现在我遇到的问题，在第一项轮播，功能区因overflow: hidden

而隐藏

reference image

Link on which I am working

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

先谢谢。

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的{​​{1}}。它会在100％的页面宽度上显示所有滑块，是的。

但是您将.owl-carousel .owl-stage-outer设置为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; } 执行相同操作才能隐藏正确的内容。

Answer 3

试试这个解决方案

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