Owlカルーセル、ショーチャイルドアブソリュートdiv、オーバーフローオーバーフロー隠しdiv

Question

私はフクロウカルーセル2を使用していますが、私は問題に直面しています。

私はowl-stage-outerという名前の親のdivを持っていますが、それはカルーセルの要件として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;"> 

EDIT：あなたのowl-stage-outerの

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

を：：

そのは

はあなたcontainerのこの作品を追加

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

Answer 2

ここにあなたが試すことができますことを修正（汚れの種類が、それは動作します）です：

まずあなたが.owl-carousel .owl-stage-outerのoverflow: hiddenを削除します。スライダはページの幅の100％に表示されます。

しかし、position: static;の代わりにposition: relative;を.owl-carousel .owl-stage-outerに設定しました。

その後、左部分を隠すために、このようにそれに: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; 
}