Bootstrap 4 Alpha 6 垂直轮播

Question

我正在尝试在 Bootstrap 4 Alpha 6 中创建一个垂直方向的旋转木马。我仍然无法弄清楚为什么 Bootstrap 的人不包括这个方向，但我已经接近我自己的解决方案。我的 CSS 中似乎遗漏了一些东西，但似乎无法放置它。

上查看我的演示

我的问题是旋转木马幻灯片不能向上流动。幻灯片从底部出现，但在结束时不会继续向上 -- 而是消失。

我正在通过编译用 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);
}

Vertical Carousel Demo

Bootstrap 4 Alpha 6 垂直轮播

Bootstrap 4 Alpha 6 Vertical Carousel

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-carousel

bootstrap-4