Bootstrap 4 beta 轮播中的分层图像答案

【问题标题】：Layered images in Bootstrap 4 beta carouselBootstrap 4 beta 轮播中的分层图像
【发布时间】：2017-09-13 22:12:04
【问题描述】：

我很难弄清楚如何做我想做的事，所以我想我会解释我想要什么，并提供说明我的问题的代码笔。

我想要什么：

一个轮播，有各种幻灯片，夹在中间的静态图片上。考虑 3 层——1 层是背景，2 层是中间的人（模型），3 层是前景元素。我希望幻灯片包含 bg 和 fg，但模型保持静止。随着幻灯片的移动，它基本上只会改变背景和前景元素。

问题：

因为我不精通 z-index 层次结构，所以我不确定如何完成我想要的。因为滑块需要我将第 2 层拆分为父元素，所以它不会在幻灯片之间进行动画处理，所以当幻灯片出现时，它们会根据它们的容器进行分层，但它们仍然位于后面模型。我终其一生都想不出如何将模型置于每张幻灯片的元素之间。

示例：

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

在此先感谢您的帮助，如果有什么我可以添加的内容可以帮助您获得答案，请告诉我。 ^_^

【问题讨论】：

标签： twitter-bootstrap z-index bootstrap-4 bootstrap-carousel

【解决方案1】：

好的 - 对于那些将来可能会发现这一点的人，我想通了。我不得不使用我的后备（并没有我想象的那么糟糕）。我制作了 2 个滑块，并将 fg 滑块嵌套到内部 div 之后的第一个滑块中。然后我删除了 data-* HTML 事件，并通过缓存一个 var 来手动调用幻灯片，该 var 在 doc 上准备好了一个多 jQuery 选择器。然后，我使用 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'));
});

【讨论】：