Owl轮播，显示child绝对div，超过parent溢出隐藏div

Question

我正在使用 owl carousel 2，我遇到了以下问题。

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

我有另一个 child div 名称：ribbon（显示 'New Arrival' 和 'Big Sale'）这是 position: absolute 现在的问题是我面对的是，在旋转木马的第一个项目上，丝带因为 overflow: hidden

而隐藏了

reference image

Link on which I am working

我已经尝试过此 link 中提供的解决方案，但它仅适用于即时 child。

提前致谢。

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

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

首先删除 .owl-carousel .owl-stage-outer 中的 overflow: hidden。它会在页面宽度的 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;
}

Owl轮播，显示child绝对div，超过parent溢出隐藏div

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

html

css

jquery

owl-carousel

owl-carousel-2