Bootstrap 4 beta 轮播中的分层图像
Layered images in Bootstrap 4 beta carousel
我很难弄清楚如何做我想做的事,所以我想我会解释我想做的事,并提供说明我的问题的代码笔。
我想要的:
一个旋转木马,其中有各种幻灯片夹在中间的静态图像上。想想 3 层——1 层是背景,2 层是中间的人(模型),3 层是前景元素。我希望幻灯片包含 bg 和 fg,但模型保持静止。随着幻灯片的移动,基本上只会改变背景和前景元素。
问题:
因为我不精通 z-index 层次结构,所以我不确定如何完成我想要的。因为滑块需要我将第 2 层分解为父元素,所以它不会在幻灯片之间进行动画处理,当幻灯片出现时,它们会根据它们的容器分层,但它们仍然位于 后面 模型。我这辈子都想不出如何在每张幻灯片的元素之间放置模型。
示例:
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%;
}
在此先感谢您的帮助,如果有任何我可以补充的内容,请告诉我,这将有助于促进答案。 ^_^
好的 - 对于那些将来可能会发现这个的人,我想通了。我不得不使用我的后备方案(这并不像我想象的那么糟糕)。我制作了 2 个滑块,并将 fg 滑块嵌套到内部 div 之后的第一个滑块中。然后我删除了 data-* HTML 事件,并通过缓存一个在 doc ready 上有多个 jQuery 选择器的 var 来手动调用幻灯片。然后,我使用 fg 层上的控件添加 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'));
});
我很难弄清楚如何做我想做的事,所以我想我会解释我想做的事,并提供说明我的问题的代码笔。
我想要的:
一个旋转木马,其中有各种幻灯片夹在中间的静态图像上。想想 3 层——1 层是背景,2 层是中间的人(模型),3 层是前景元素。我希望幻灯片包含 bg 和 fg,但模型保持静止。随着幻灯片的移动,基本上只会改变背景和前景元素。
问题:
因为我不精通 z-index 层次结构,所以我不确定如何完成我想要的。因为滑块需要我将第 2 层分解为父元素,所以它不会在幻灯片之间进行动画处理,当幻灯片出现时,它们会根据它们的容器分层,但它们仍然位于 后面 模型。我这辈子都想不出如何在每张幻灯片的元素之间放置模型。
示例:
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%;
}
在此先感谢您的帮助,如果有任何我可以补充的内容,请告诉我,这将有助于促进答案。 ^_^
好的 - 对于那些将来可能会发现这个的人,我想通了。我不得不使用我的后备方案(这并不像我想象的那么糟糕)。我制作了 2 个滑块,并将 fg 滑块嵌套到内部 div 之后的第一个滑块中。然后我删除了 data-* HTML 事件,并通过缓存一个在 doc ready 上有多个 jQuery 选择器的 var 来手动调用幻灯片。然后,我使用 fg 层上的控件添加 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'));
});