Bootstrap 4 Alpha 6垂直传送带 [英] Bootstrap 4 Alpha 6 Vertical Carousel

问题描述

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

I'm trying to create a vertically oriented carousel in Bootstrap 4 Alpha 6. I still can't figure out for the life of me why the folks at Bootstrap don't include this orientation but I've come close to a solution of my own. I seem to be missing something in my CSS but cant seem to place it.

在 JSFIDDLE

Check out my demo here on JSFIDDLE

我的问题是轮播的非向上流动幻灯片。幻灯片从底部开始显示，但是在结束时不会继续显示-而是消失了。

My problem is the non upward fluid movement of the carousel slides. The slides come up from the bottom but don't continue up when they're ending -- dissappear rather.

我正在通过编译旧的方法来构建此代码这与BS3并尝试尽我所能来匹配新的CSS类。这是我的代码，解决这个谜题的任何帮助将不胜感激。

I'm building this code from compiling old methods of doing this with BS3 and trying to match up the new CSS classes the best I can. Here's my code, any help in solving this mystery would be much appreciated.

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中默认那样保持对齐。

So, rather than the carousel slides blinking out or just disappearing, then reappearing, I would like them to flow naturally upward as if the hidden images weren't left aligned as they are by default in Bootstrap.

在此先感谢！

推荐答案

Bootstrap 4.0.0的2018年更新

Updated 2018 for Bootstrap 4.0.0

Bootstrap 4个动画过渡使用 transform ，因此我认为使用翻译将方向更改为垂直，并将每张幻灯片的位置...

The Bootstrap 4 animation transitions use transform, so I think it would be better to use translate to change the orientation to vertical, and the position of each slide...

演示： 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);
}

垂直轮播演示

这篇关于Bootstrap 4 Alpha 6垂直传送带的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！