我正在尝试在Bootstrap 4 Alpha 6中创建一种垂直方向的旋转木马。我仍然无法理解为什么Bootstrap的开发者不包括这个方向,但我已经接近自己的解决方案了。我似乎在我的CSS中缺少某些东西,但无法确定。
请在JSFIDDLE上查看我的演示。
我的问题是旋转木马幻灯片的非向上流体运动。幻灯片从底部出现,但当它们结束时,它们不会继续向上运动 -- 而是消失了。
我正在根据BS3编译旧方法来构建此代码,并尽量匹配新的CSS类。以下是我的代码,非常感谢您对解决这个谜团的任何帮助。
HTML
<!-- Bootstrap Carousel -->
<div id="testCarousel" class="carousel slide vertical" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#testCarousel" data-slide-to="0" class="active"></li>
<li data-target="#testCarousel" data-slide-to="1"></li>
<li data-target="#testCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="//placehold.it/2500x750" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="//placehold.it/2500x750" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="//placehold.it/2500x750" alt="Third slide">
</div>
</div>
</div>
CSS
/* Just for Example Purposes */
body {
background: #333
}
/* Vertical Carousel */
.vertical .carousel-inner {
height: 100%;
}
.carousel.vertical .carousel-item {
-webkit-transition: 0.6s ease-in-out top;
-moz-transition: 0.6s ease-in-out top;
-ms-transition: 0.6s ease-in-out top;
-o-transition: 0.6s ease-in-out top;
transition: 0.6s ease-in-out top;
}
.carousel.vertical .active {
top: 0;
}
.carousel.vertical .carousel-item-next {
top: 100%;
}
.carousel.vertical .carousel-item-prev {
top: -100%;
}
.carousel.vertical .carousel-item-next.carousel-item-left,
.carousel.vertical .carousel-item-prev.carousel-item-right {
top: 0;
}
.carousel.vertical .active.carousel-item-left {
top: -100%;
}
.carousel.vertical .active.carousel-item-right {
top: 100%;
}
.carousel.vertical .carousel-item {
left: 0;
}
因此,我希望轮播幻灯片不是突然消失或重新出现,而是像隐藏的图像在Bootstrap中默认为左对齐一样自然地向上流动。
提前感谢!!!