引导 4 阿尔法 6 垂直旋转木马

Question

我正在尝试在 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 中默认的那样左对齐。

提前谢谢!!

Answer 1

2018 年更新为 Bootstrap 4.0.0

Bootstrap4 动画过渡使用transform，所以我认为最好使用translate将方向更改为垂直，以及每张幻灯片的位置......

演示：http://www.codeply.com/go/PgxKT3h6x6

.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.vert .carousel-item-next,
.vert .active.carousel-item-right {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100% 0);
}
.vert .carousel-item-prev,
.vert .active.carousel-item-left {
-webkit-transform: translate3d(0,-100%, 0);
transform: translate3d(0,-100%, 0);
}

垂直轮播演示