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