Bootstrap 4β旋转木马中的分层图像

Question

我很难想办法做我想做的事，所以我想我应该解释我想要什么，并提供说明我的问题的代码。

我想要的：

一种旋转木马，它有各种幻灯片，夹在中间的静态图像上。想三层-- 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

好吧-对于那些将来可能会发现的人，我想出了办法。我不得不使用我的退路(这并不像我想的那么糟糕)。我制作了2个滑块，并将fg滑块嵌套到内部div之后的第一个滑块中。然后，我删除了数据-* HTML事件，并通过缓存一个在doc上有多个jQuery选择器的var，手动调用了幻灯片。然后，我使用fg层上的控件添加了用prev和next箭头控制滑块的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;
}

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