부트 스트랩 4 베타 컨베이어의 계층화 된 이미지

Question

나는 내가 원하는 것을 설명하는 방법을 알아 내려고 끔찍한 시간을 보내고 있습니다. 그래서 내가 원하는 것을 설명하고 내 문제를 설명하는 코드 푼을 제공합니다.

내가 원하는 무엇 : 중간 이상 사이에두고 다양한 슬라이드, 정적 이미지가

회전식. 3 개의 레이어를 생각해보십시오 - 1은 bg, 2는 중간에있는 사람 (모델), 3은 전경 요소입니다. 슬라이드에 bg와 fg가 들어 있지만 모델은 고정되어 있어야합니다. 슬라이드가 이동함에 따라 기본적으로 배경 및 전경 요소 만 변경됩니다.

문제 : 내가 Z- 인덱스 계층 구조에 정통한 아니에요 때문에

, 내가 원하는 것을 달성하는 방법을 모르겠어요. 슬라이더를 사용하면 부모 요소로 두 번째 레이어를 나눌 필요가 있으므로 슬라이드간에 애니메이션을 적용하지 않아도됩니다. 슬라이드가 오면 컨테이너에 따라 레이어가 올바르게 구성되지만 여전히 모델 뒤에 이 붙습니다. 나는 내 삶을 위해 각 슬라이드의 요소들 사이에서 모델을 얻는 방법을 찾아 낼 수 없다.

예 :

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

강령 :

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

Ok - 앞으로이 사실을 알게 될 사람들을 위해 알아 냈습니다. 나는 나의 fallback (나는 생각했던만큼 나쁘지 않았다)을 사용해야했다. 나는 2 개의 슬라이더를 만들고, fg 슬라이더를 내부 div 다음의 첫 번째 슬라이더에 중첩시켰다. 그런 다음 data- * HTML 이벤트를 지우고 doc 준비가 된 다중 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; 
} 

자바 스크립트 (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')); 
});