レイヤードイメージをブートストラップ4ベータカルーセル

Question

私は欲しいものをやり遂げる方法を見つけようと苦労しているので、私が望むものを説明し、私の問題を示すコードペンを提供すると思いました。私が欲しいもの

：

真ん中の上に挟む様々なスライド、静的なイメージを持っているカルーセル。 3つのレイヤーを考えてみましょう.1つはbg、2つは中央のモデル（モデル）、3つはフォアグラウンド要素です。私はスライドにbgとfgを入れておきたいが、モデルは動かないようにしたい。スライドは動くので、基本的に背景と前景の要素のみが変更されます。

問題：

Iは、zインデックスの階層に精通していないよので、私は私が望むものを達成するかどうかはわかりません。スライダでは2番目のレイヤを親要素に分割してスライド間でアニメートしないようにする必要があるため、スライドが来るとコンテナに応じてレイヤーが作成されますが、の背後にはのままです。私は私の人生の間、各スライドの要素の間にモデルをどうやって得るかを考え出すことはできません。

例：

​​

コード：

HTML

<div class="container"> 
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> 
     <div class="carousel-inner"> 
      <img id="model" class="index-2" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338828/Glenna_bmvvk9.png" alt="Model middle layer"> 
      <div class="carousel-item active"> 
       <img class="d-block w-100 index-1" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338834/KingKong_1_zmwsmu.jpg" alt="First slide bottom layer"> 
       <img class="d-block w-100 index-3" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338836/KingKong_2_g3bdhd.png" alt="First slide top layer"> 
      </div> 
      <div class="carousel-item"> 
       <img class="d-block w-100 index-1" src="http://res.cloudinary.com/jrhager84/image/upload/v1505338843/SantaWindow_1_xeaojc.jpg" alt="Second slide"> 
       <img class="d-block w-100 index-3" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338864/SantaWindow_2_rvskzc.png" alt="Second slide top layer"> 
      </div> 
      <div class="carousel-item"> 
       <img class="d-block w-100 index-1" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338831/Mario_1_doib9k.jpg" alt="Third slide"> 
       <img class="d-block w-100 index-3" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338829/Mario_2_gp2fhj.png" alt="Third slide top layer"> 
      </div> 
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> 
       <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
       <span class="sr-only">Previous</span> 
      </a> 
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> 
       <span class="carousel-control-next-icon" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
     </div> 
    </div> 

CSS

.carousel { 
    background-color: #efefef; 
} 

.index-1 { 
    z-index: 1 !important; 
} 

.index-2 { 
    z-index: 2 !important; 
} 

.index-3 { 
    z-index: 300 !important; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

#model { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
} 

ご協力いただきありがとうございます。私がこれに追加できるものがあれば、回答を促すために役立つものがあれば教えてください。^_^

Answer 1

コントロールに最高のZ-インデックスを付けるので、あなたのコードブックで使用することはできません。

.index-4 { 
    z-index: 4; 
} 

はまた、あなたは同じDIV要素でそれらを持っている必要があります：

<div class="carousel-item active"> 
      <img class="d-block w-100 index-1" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338834/KingKong_1_zmwsmu.jpg" alt="First slide bottom layer"> 
      <img id="model" class="index-2" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338828/Glenna_bmvvk9.png" alt="Model middle layer"> 
      <img class="d-block w-100 index-3" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338836/KingKong_2_g3bdhd.png" alt="First slide top layer"> 
     </div> 

は私のために完璧に動作します。あなたは.INDEX-1クラスを除いてやった

position: relative; 
position: fixed; 
position: absolute; 

： はまた、あなたは次のように、位置の値を指定する必要があります。要素のデフォルトの位置は '静的'なので、Z-インデックスはそれらに対して機能しません。

Answer 2

オクラホマ - これが将来見つかるかもしれない人のために、私はそれを理解しました。私はフォールバック（私が思ったほど悪くない）を使用しなければならなかった。私は2つのスライダーを作って、内側のdivの後に最初のスライダーにfgスライダーを入れ子にしました。次に、data- * HTMLイベントを消去し、マニュアルで複数のjQueryセレクタを持つvarをキャッシングして、手動でスライドを一緒に呼び出しました。次に、fgレイヤーのコントロールを使用して、両方のスライダーを前と次の矢印で制御するjQueryイベントを追加しました。

コードはここにある： https://codepen.io/jrhager84/pen/NaPpKO

HTML

<!-- The page ontainer --> 
<div class="container"> 

    <!-- The bg slider container --> 
    <div id="carousel-bg-layer" class="carousel-bg slide"> 

     <!-- The Main Carousel inner container --> 
     <div class="carousel-inner"> 

      <!-- The Model image sibling to containers --> 
      <img id="model" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338828/Glenna_bmvvk9.png" alt="Model middle layer"> 

      <!-- The actual slides --> 
      <div class="carousel-item active"> 
       <img class="d-block w-100" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338834/KingKong_1_zmwsmu.jpg" alt="First slide bottom layer"> 
      </div> 
      <div class="carousel-item"> 
       <img class="d-block w-100" src="http://res.cloudinary.com/jrhager84/image/upload/v1505338843/SantaWindow_1_xeaojc.jpg" alt="Second slide"> 
      </div> 
      <div class="carousel-item"> 
       <img class="d-block w-100" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338831/Mario_1_doib9k.jpg" alt="Third slide"> 
      </div> 

     </div> <!-- eof main container inner --> 

      <!-- The sub carousel outer wrapper --> 
      <div id="carousel-fg-layer" class="carousel-fg slide"> 

       <!-- The sub carousel inner container --> 
       <div class="carousel-inner"> 

        <div class="carousel-item active"> 
         <img class="d-block w-100" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338836/KingKong_2_g3bdhd.png" alt="First slide top layer"> 
        </div> 
        <div class="carousel-item"> 
         <img class="d-block w-100" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338864/SantaWindow_2_rvskzc.png" alt="Second slide top layer"> 
        </div> 
        <div class="carousel-item"> 
         <img class="d-block w-100" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338829/Mario_2_gp2fhj.png" alt="Third slide top layer"> 
        </div> 

       </div> <!-- eof 2nd carousel container inner --> 

       <!-- Next & Prev links for containers --> 
       <a class="carousel-control-prev carousel-control" href="#" role="button"> 
        <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
        <span class="sr-only">Previous</span> 
       </a> 
       <a class="carousel-control-next carousel-control" href="#" role="button"> 
        <span class="carousel-control-next-icon" aria-hidden="true"></span> 
        <span class="sr-only">Next</span> 
       </a> 
     </div> <!-- eof 2nd container outer --> 
    </div> <!-- eof 1st container outer --> 


</div> <!-- eof page container --> 

CSS

.carousel-bg { 
    position: relative; 
} 

#model { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    z-index: 2; 
} 

.carousel-fg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: 3; 
} 

のJavaScript（jQueryの）私は謝罪

$(document).ready(function() { 
    // Init cache sliders to one variable 
    var $carousel = $('.carousel-bg, .carousel-fg'); 

    // Init cache prev and next controls 
    var $prev = $('.carousel-control-prev'); 
    var $next = $('.carousel-control-next'); 

    // Invoke slider animation on page load 
    $carousel.carousel({ 
     interval: 4000, 
     pause: 'hover' 
    }); 

    // Listen for clicks on 'prev' and 'next' controls 
    $prev.on('click', function() 
    { 
     $carousel.carousel('prev'); 
    }); 
    $next.on('click', function() 
    { 
     $carousel.carousel('next'); 
    }); 
    $next.on('click', carousel('next')); 
});