角度のあるブートストラップのテキストカルーセルの垂直スクロール

Question

私は角度のあるブートストラップのテキストカルーセルを持っていますが、代わりにどのように同じコードを使用できますか？実際には（水平スクロール）JSFiddleです。

これは私が1分で持っているものです。

HTML：

<div ng-app="textCarousel" class="row"> 
    <div id="group-news-carousel"> 
    <div ng-controller="groupNewsController" id="text-carousel"> 
     <h2>Group News</h2> 
     <carousel interval="interval"> 
     <slide ng-repeat="slide in slides" active="slide.active"> 
      {{slide.text}} 
     </slide> 
     </carousel> 
    </div> 
    </div> 
</div> 

CSS：

.carousel { 
    position: relative; 
} 
.carousel-inner { 
    position: relative; 
    overflow: hidden; 
    width: 100%; 
    height: 290px; 
    text-align: center; 
} 

.carousel-inner > .item { 
    display: none; 
    position: relative; 
    -webkit-transition: 0.6s ease-in-out left; 
    -o-transition: 0.6s ease-in-out left; 
    transition: 0.6s ease-in-out left; 
    margin-top: 120px; 
} 

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
    line-height: 1; 
} 
@media all and (transform-3d), (-webkit-transform-3d) { 
    .carousel-inner > .item { 
    -webkit-transition: -webkit-transform 0.6s ease-in-out; 
    -o-transition: -o-transform 0.6s ease-in-out; 
    transition: transform 0.6s ease-in-out; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-perspective: 1000px; 
    perspective: 1000px; 
    } 
    .carousel-inner > .item.next, 
    .carousel-inner > .item.active.right { 
    -webkit-transform: translate3d(100%, 0, 0); 
    transform: translate3d(100%, 0, 0); 
    left: 0; 
    } 
    .carousel-inner > .item.prev, 
    .carousel-inner > .item.active.left { 
    -webkit-transform: translate3d(-100%, 0, 0); 
    transform: translate3d(-100%, 0, 0); 
    left: 0; 
    } 
    .carousel-inner > .item.next.left, 
    .carousel-inner > .item.prev.right, 
    .carousel-inner > .item.active { 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    left: 0; 
    } 
} 
.carousel-inner > .active, 
.carousel-inner > .next, 
.carousel-inner > .prev { 
    display: block; 
} 
.carousel-inner > .active { 
    left: 0; 
} 
.carousel-inner > .next, 
.carousel-inner > .prev { 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 
.carousel-inner > .next { 
    left: 100%; 
} 
.carousel-inner > .prev { 
    left: -100%; 
} 
.carousel-inner > .next.left, 
.carousel-inner > .prev.right { 
    left: 0; 
} 
.carousel-inner > .active.left { 
    left: -100%; 
} 
.carousel-inner > .active.right { 
    left: 100%; 
} 
.carousel-control { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    width: 15%; 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
    font-size: 20px; 
    color: #ffffff; 
    text-align: center; 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); 
    background-color: rgba(0, 0, 0, 0); 
} 
.carousel-control.left { 
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); 
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); 
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001))); 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); 
} 
.carousel-control.right { 
    left: auto; 
    right: 0; 
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); 
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); 
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5))); 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); 
} 
.carousel-control:hover, 
.carousel-control:focus { 
    outline: 0; 
    color: #ffffff; 
    text-decoration: none; 
    opacity: 0.9; 
    filter: alpha(opacity=90); 
} 
.carousel-control .icon-prev, 
.carousel-control .icon-next, 
.carousel-control .glyphicon-chevron-left, 
.carousel-control .glyphicon-chevron-right { 
    position: absolute; 
    top: 50%; 
    margin-top: -10px; 
    z-index: 5; 
    display: inline-block; 
} 
.carousel-control .icon-prev, 
.carousel-control .glyphicon-chevron-left { 
    left: 50%; 
    margin-left: -10px; 
} 
.carousel-control .icon-next, 
.carousel-control .glyphicon-chevron-right { 
    right: 50%; 
    margin-right: -10px; 
} 
.carousel-control .icon-prev, 
.carousel-control .icon-next { 
    width: 20px; 
    height: 20px; 
    line-height: 1; 
    font-family: serif; 
} 
.carousel-control .icon-prev:before { 
    content: '\2039'; 
} 
.carousel-control .icon-next:before { 
    content: '\203a'; 
} 
.carousel-indicators { 
    position: absolute; 
    bottom: 25px; 
    left: 50%; 
    z-index: 15; 
    width: 60%; 
    margin: 0 -30%; 
    padding-left: 0; 
    list-style: none; 
    text-align: center; 
} 
.carousel-indicators li { 
    display: inline-block; 
    height: 15px; 
    width: 15px; 
    border: 4px solid #cccccc; 
    border-radius: 50%; 
    padding: 5px; 
    margin: 0 6px; 
    opacity: 0.4; 
    background-color: #ffffff; 
    transition: ease 0.7s; 
    cursor: pointer; 
} 
.carousel-indicators .active { 
    opacity: 1; 
    transition: ease 0.7s; 
} 
.carousel-caption { 
    position: absolute; 
    left: 15%; 
    right: 15%; 
    bottom: 20px; 
    z-index: 10; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    color: #ffffff; 
    text-align: center; 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); 
} 
.carousel-caption .btn { 
    text-shadow: none; 
} 

おかげ

Answer 1

CSSで次のように変更します。垂直方向のナビゲーションのための

.carousel-inner > .item { 
    display: none; 
    position: relative; 
    -webkit-transition: 0.6s ease-in-out top; 
    -o-transition: 0.6s ease-in-out top; 
    transition: 0.6s ease-in-out top; 
    margin-top: 120px; 
} 

.carousel-inner > .item.next, 
.carousel-inner > .item.active.right { 
    -webkit-transform: translate3d(0, 100%, 0); 
    transform: translate3d(0, 100%, 0); 
    top: 0; 
} 
.carousel-inner > .item.prev, 
.carousel-inner > .item.active.left { 
    -webkit-transform: translate3d(0, -100%, 0); 
    transform: translate3d(0, -100%, 0); 
    top: 0; 
} 

：上スクロールの下について

.carousel-indicators { 
    position: absolute; 
    bottom: 25px; 
    right: 10%; 
    z-index: 15; 
    width: 10%; 
    height:60%; 
    margin: 0 -30%; 
    padding-left: 0; 
    list-style: none; 
    text-align: center; 
} 

私はあなたが行ってもいいことだと思います。お役に立てれば。