z index - Layered images in Bootstrap 4 beta carousel -
i'm having terrible time trying figure out how want, figured i'd explain want, , provide codepen illustrates problem.
what want:
a carousel has various slides sandwich on middle, static image. think 3 layers -- 1 being bg, 2 being person in middle (the model), , 3 being foreground element. want slides contain bg , fg, model stay stationary. slides move, changes background , foreground elements.
the problem:
because i'm not well-versed in z-index hierarchy, i'm not sure how accomplish want. because slider requires me break 2nd layer out parent element doesn't animate between slides, when slides come, they're layered right according container, still sit behind model. can't life of me figure out how model in between 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 help, , please let me know if there's can add facilitate answer. ^_^
ok - may find in future, figured out. had use fallback (which wasn't bad thought). made 2 sliders, , nested fg slider 1st slider after inner div. erased data-* html events , manually called slides caching var had multi jquery selector on doc ready. then, used controls on fg layer add jquery events controlled both sliders prev , next arrows.
the code here: https://codepen.io/jrhager84/pen/nappko
html
<!-- page ontainer --> <div class="container"> <!-- bg slider container --> <div id="carousel-bg-layer" class="carousel-bg slide"> <!-- main carousel inner container --> <div class="carousel-inner"> <!-- model image sibling containers --> <img id="model" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338828/glenna_bmvvk9.png" alt="model middle layer"> <!-- 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 --> <!-- sub carousel outer wrapper --> <div id="carousel-fg-layer" class="carousel-fg slide"> <!-- 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 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 1 variable var $carousel = $('.carousel-bg, .carousel-fg'); // init cache prev , 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 clicks on 'prev' , 'next' controls $prev.on('click', function() { $carousel.carousel('prev'); }); $next.on('click', function() { $carousel.carousel('next'); }); $next.on('click', carousel('next')); }); 
Comments
Post a Comment