Bootstrap 4 Alpha 6 Vertikales Karussell

Question

Ich versuche in Bootstrap 4 Alpha 6 ein vertikal orientiertes Karussell zu erstellen. Ich kann immer noch nicht herausfinden, warum die Leute bei Bootstrap diese Ausrichtung nicht haben, aber ich bin einer eigenen Lösung nahe gekommen. Mir scheint etwas in meinem CSS zu fehlen, aber ich kann es nicht platzieren.

Schauen Sie sich meine Demo hier auf JSFIDDLE

Mein Problem ist, das nicht nach oben fließende Bewegung des Karussells gleitet. Die Slides kommen von unten, gehen aber nicht weiter, wenn sie enden - verschwinden eher.

Ich baue diesen Code aus der Kompilierung alter Methoden, dies mit BS3 zu tun und versuche, die neuen CSS Klassen so gut wie möglich zu kombinieren. Hier ist mein Code, jede Hilfe bei der Lösung dieses Geheimnisses wäre sehr willkommen.

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

Also, anstatt die Karussell Dias zu blinken oder einfach nur verschwinden, dann wieder auftaucht, ich möchte sie natürlich fließen nach oben, als ob Die versteckten Bilder wurden nicht linksbündig ausgerichtet, wie es in Bootstrap standardmäßig der Fall ist.

Vielen Dank im Voraus !!!

Answer 1

Die Bootstrap 4 Animationsübergänge verwenden transform, so denke ich, es wäre besser, translate zu verwenden, um die Orientierung zu vertikal zu ändern, und die Position jedes Dia ...

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