Layered Bilder in Bootstrap 4 Beta-Karussell

Question

Ich habe eine schreckliche Zeit zu versuchen, herauszufinden, wie zu tun, was ich will, so dachte ich, würde ich erklären, was ich will, und bieten die Codepen, die mein Problem veranschaulicht.

Was ich will:

Ein Karussell, das verschiedene Dias hat, die über einen mittleren Sandwich, statisches Bild. Denken Sie an 3 Ebenen - 1 ist das bg, 2 ist die Person in der Mitte (das Modell) und 3 ist das Vordergrundelement. Ich möchte, dass die Folien das bg und fg enthalten, das Modell jedoch stationär bleibt. Wenn sich die Folien bewegen, werden grundsätzlich nur die Hintergrund- und Vordergrundelemente geändert.

Das Problem:

Weil ich bin nicht sehr versiert in der Hierarchie z-index, ich bin nicht sicher, wie zu erreichen, was ich will. Da der Schieberegler erfordert, dass ich die zweite Ebene in ein übergeordnetes Element zerlege, damit sie zwischen den Folien nicht animiert wird, werden die Folien zwar nach ihrem Container geschichtet, aber sie sitzen immer noch hinter dem Modell. Ich kann nicht für das Leben von mir herausfinden, wie man das Modell zwischen die Elemente in jeder Folie bringt.

Das Beispiel:

https://codepen.io/jrhager84/pen/wrvErb

Der Code:

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

Vielen Dank im Voraus für Ihre Hilfe, und lassen Sie mich bitte wissen, wenn ich etwas hinzufügen kann, das dazu beitragen würde, eine Antwort zu erleichtern.^_^

Answer 1

Geben Sie den Controls den höchsten Z-Index, ich kann sie nicht in Ihrem Codepen verwenden.

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

Auch Sie haben sie in der gleichen DIV-Element haben:

<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> 

Funktioniert perfekt für mich. Außerdem müssen Sie einen Positionswert angeben, wie:

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

Was Sie auf der .index-1-Klasse hat mit Ausnahme. Die Standardposition von Elementen ist 'statisch', daher funktioniert der Z-Index nicht.

Answer 2

Ok - Für diejenigen, die dies in der Zukunft finden können, habe ich es herausgefunden. Ich musste meinen Fallback benutzen (was nicht so schlimm war wie ich dachte). Ich machte 2 Schieberegler und verschachtelte den fg-Schieberegler nach dem inneren div in den 1. Schieberegler. Dann löschte ich die Daten * HTML-Ereignisse und manuell die Folien zusammen durch Zwischenspeichern einer Var, die eine Multi-jQuery-Selektor auf Doc bereit hatte. Dann habe ich die Steuerelemente auf der fg-Ebene verwendet, um jQuery-Ereignisse hinzuzufügen, die beide Schieberegler mit den Pfeilen prev und next gesteuert haben.

Der Code ist hier: 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')); 
});