Twitter bootstrap Bootstrap 4 beta carousel中的分层图像

我在试图弄清楚如何做我想做的事情时经历了一段糟糕的时光，所以我想我应该解释一下我想要什么，并提供代码笔来说明我的问题

我想要什么：

有各种幻灯片的旋转木马，夹在中间的静态图像上。想想3层——1是BG，2是中间人（模型），3是前景元素。我希望幻灯片包含背景和前景，但模型保持静止。当幻灯片移动时，它基本上只改变背景和前景元素

问题：

因为我不太熟悉z索引层次结构，所以我不确定如何实现我想要的。因为滑块需要我将第二层分解为父元素，所以它不会在幻灯片之间设置动画，当幻灯片出现时，它们会根据容器进行分层，但它们仍然位于模型后面。我一辈子都不知道如何在每张幻灯片的元素之间建立模型

示例：

代码：

HTML

---

提前感谢您的帮助，如果有什么我可以补充的，请让我知道，这将有助于促进一个答案^_^

好吧——对于那些将来可能会发现这一点的人，我已经找到了答案。我不得不使用我的后备策略（这并没有我想象的那么糟糕）。我制作了两个滑块，并将fg滑块嵌套到内部div之后的第一个滑块中。然后我删除了data-*HTML事件，并通过缓存一个var（在doc ready上有一个multi-jQuery选择器）手动调用了这些幻灯片。然后，我使用fg层上的控件添加jQuery事件，这些事件使用prev和next箭头控制两个滑块

代码如下：

HTML

JavaScript（jQuery）

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

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

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

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

$(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'));
});