Bootstrap 4測試輪播中的分層圖像

我正在試圖弄清楚如何做我想做的事情，所以我想我會解釋我想要的，並提供說明我的問題的codepen。Bootstrap 4測試輪播中的分層圖像

我想要什麼：

有夾持在中間的各種幻燈片，靜態圖像旋轉木馬。認爲3層 - 1是bg，2是中間的人（模型），3是前景元素。我希望幻燈片包含bg和fg，但模型要保持靜止。隨着幻燈片的移動，它基本上只會改變背景和前景元素。

問題：

，因爲我不是在z-index的層次非常熟悉，我不知道如何完成我想要的東西。由於滑塊需要將第二層分解爲父元素，因此它不會在幻燈片之間生成動畫，所以當幻燈片出現時，它們會根據其容器分層，但它們仍然位於模型後面。我不能在我的生活中弄清楚如何在每張幻燈片中的元素之間獲取模型。

的實施例：

的代碼：

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

在此先感謝您的幫助，並請讓我知道是否有任何我可以添加到這將有助於方便答案。^_^

來源

2017-09-13 Joel Hager

給控制器最高的Z-索引，我不能在你的codepen中使用它們。

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

完全爲我工作。你也必須指定一個位置值，如：

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

你做了什麼，除了上的.index-1級。元素的默認位置是'靜態'，因此Z-Index不適用於它們。

來源

2017-09-13 22:24:22 NoNickAvailable

我道歉，我甚至懶得同控制。我會解決這個問題。關於具有相同的元素。這不會讓每個幻燈片中的模型都變成動畫嗎？我希望模型能夠保持整個時間 - 即使在幻燈片動畫期間。 –

嗯，這是真的，但你的Z索引正確設置，所以我想它必須與你的HTML佈局。你可以嘗試的是有2個滑塊，一個用於背景，一個用於前景和它之間的模型圖像，全部包裹在父div中以對齊滑塊和圖像。 – NoNickAvailable

類似於：

當然這只是僞代碼標記，所以你知道我的意思 – NoNickAvailable

好的 - 對於那些未來可能會發現這個問題的人，我想清楚了。我不得不使用我的後備（這不像我想象的那麼糟糕）。我製作了2個滑塊，並在內部div之後將fg滑塊嵌入到第1個滑塊中。然後我擦除了data-* HTML事件，並通過緩存一個在doc上有多個jQuery選擇器的var來手動調用幻燈片。然後，我使用fg圖層上的控件添加jQuery事件，它們使用prev和next箭頭控制兩個滑塊。

的代碼是在這裏： 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')); 
});

來源

2017-09-14 10:27:24

Bootstrap 4測試輪播中的分層圖像

回答

相關問題