Layered images in Bootstrap 4 beta carousel

Question

I'm having a terrible time trying to figure out how to do what I want, so I figured I'd explain what I want, and provide the codepen that illustrates my problem.

What I want:

A carousel that has various slides that sandwich over a middle, static image. Think 3 layers -- 1 being the bg, 2 being the person in the middle (the model), and 3 being the foreground element. I want the slides to contain the bg and fg, but the model to stay stationary. As the slides move, it basically only changes the background and foreground elements.

The problem:

Because I'm not well-versed in z-index hierarchy, I'm not sure how to accomplish what I want. Because the slider requires me to break the 2nd layer out into a parent element so it doesn't animate between slides, when the slides come, they're layered right according to their container, but they still sit behind the model. I can't for the life of me figure out how to get the model in between the elements in each slide.

The Example:

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

The Code:

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

Thanks in advance for your help, and please let me know if there's anything I can add to this that would help facilitate an answer. ^_^

Answer 1

Ok - For those who may find this in the future, I figured it out. I had to use my fallback (which wasn't as bad as I thought). I made 2 sliders, and nested the fg slider into the 1st slider after the inner div. Then I erased the data-* HTML events and manually called the slides together by caching a var that had a multi jQuery selector on doc ready. Then, I used the controls on the fg layer to add jQuery events that controlled both sliders with the prev and next arrows.

The code is here: 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'));
});