Bootstrap 4 Alpha 6 Vertical Carousel

问题

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.

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.

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;
}

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.

Thanks in advance!!!

回答1:

Updated 2018 for Bootstrap 4.0.0

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...

Demo: 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

来源：https://stackoverflow.com/questions/42910076/bootstrap-4-alpha-6-vertical-carousel

标签

css

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4

bootstrap-carousel