ブートストラップ4アルファ6垂直カルーセル

Question

ブートストラップ4アルファ6で垂直方向のカルーセルを作成しようとしています。ブートストラップの人々にこの方向は含まれていないのですが、私自身の解決策に近づいてきた。私は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; 
} 

だから、カルーセルスライドが出て点滅またはちょうど再び現れる、その後、消えるのではなく、私がいるかのように上向きに自然に流れるようにそれらをしたいと思います隠された画像は、デフォルトではブートストラップのままにされていませんでした。

ありがとうございます!!!

Answer 1

ブートストラップ4アニメーション遷移が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