부트 스트랩 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