Bootstrap旋轉木馬顯示下一張幻燈片的一部分

Question

我有一個當前垂直滾動的引導旋轉木馬。有沒有辦法顯示下一張幻燈片（比如33％）的一部分，它將坐在底部，並位於當前幻燈片的上方，並在滑動時理想地滑動。我已經設置了一個fiddle與我目前有。

HTML：

<div class="container"> 
    <div class="page-header"> 
    <h1>Bootstrap Vertical Carousel</h1> 
    <p class="lead">Out of the box, Bootstrap only comes with a traditional horizontal carousel. This Pen has the HTML and CSS to get it to animate vertically with up/down carousel controls.</p> 
    </div> 
</div> 

<div class="bg-info"> 
    <div class="container"> 
    <div id="carousel-example-vertical" class="carousel vertical slide"> 
     <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img src="http://placehold.it/350x150/123456"> 
     </div> 
     <div class="item"> 
      <p class="ticker-headline"> 
      <img src="http://placehold.it/350x150/236152"> 
      </p> 
     </div> 
     <div class="item"> 
      <img src="http://placehold.it/350x150/096437"> 
     </div> 
     <div class="item"> 
      <img src="http://placehold.it/350x150/000000"> 
     </div> 
     </div> 

     <!-- Controls --> 
     <a class="up carousel-control" href="#carousel-example-vertical" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
     </a> 
     <a class="down carousel-control" href="#carousel-example-vertical" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
     </a> 
    </div> 
    </div> 
</div> 

的CSS：

body { 
    margin: 50px 0; 
} 

.ticker-headline { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    padding: 15px 0; 
    margin: 0; 
    font-size: 18px; 
} 

.carousel.vertical .carousel-inner { 
    height: 100%; 
    width: auto; 
} 
.carousel.vertical .carousel-inner > .item { 
    width: auto; 
    padding-right: 50px; 
    -webkit-transition: 0.6s ease-in-out top; 
    transition: 0.6s ease-in-out top; 
} 
@media all and (transform-3d), (-webkit-transform-3d) { 
    .carousel.vertical .carousel-inner > .item { 
    -webkit-transition: 0.6s ease-in-out; 
    transition: 0.6s ease-in-out; 
    } 
    .carousel.vertical .carousel-inner > .item.next, .carousel.vertical .carousel-inner > .item.active.right { 
    -webkit-transform: translate3d(0, 100%, 0); 
      transform: translate3d(0, 100%, 0); 
    top: 0; 
    } 
    .carousel.vertical .carousel-inner > .item.prev, .carousel.vertical .carousel-inner > .item.active.left { 
    -webkit-transform: translate3d(0, -100%, 0); 
      transform: translate3d(0, -100%, 0); 
    top: 0; 
    } 
    .carousel.vertical .carousel-inner > .item.next.left, .carousel.vertical .carousel-inner > .item.prev.right, .carousel.vertical .carousel-inner > .item.active { 
    -webkit-transform: translate3d(0, 0, 0); 
      transform: translate3d(0, 0, 0); 
    top: 0; 
    } 
} 
.carousel.vertical .carousel-inner > .active, 
.carousel.vertical .carousel-inner > .next, 
.carousel.vertical .carousel-inner > .prev { 
    display: block; 
} 
.carousel.vertical .carousel-inner > .active { 
    top: 0; 
} 
.carousel.vertical .carousel-inner > .next, 
.carousel.vertical .carousel-inner > .prev { 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 
.carousel.vertical .carousel-inner > .next { 
    top: 100%; 
} 
.carousel.vertical .carousel-inner > .prev { 
    top: -100%; 
} 
.carousel.vertical .carousel-inner > .next.left, 
.carousel.vertical .carousel-inner > .prev.right { 
    top: 0; 
} 
.carousel.vertical .carousel-inner > .active.left { 
    top: -100%; 
} 
.carousel.vertical .carousel-inner > .active.right { 
    top: 100%; 
} 

.carousel.vertical .carousel-control { 
    left: auto; 
    width: 50px; 
} 
.carousel.vertical .carousel-control.up { 
    top: 0; 
    right: 0; 
    bottom: 50%; 
} 
.carousel.vertical .carousel-control.down { 
    top: 50%; 
    right: 0; 
    bottom: 0; 
} 
.carousel.vertical .carousel-control .icon-prev, 
.carousel.vertical .carousel-control .icon-next, 
.carousel.vertical .carousel-control .glyphicon-chevron-up, 
.carousel.vertical .carousel-control .glyphicon-chevron-down { 
    position: absolute; 
    top: 50%; 
    z-index: 5; 
    display: inline-block; 
} 
.carousel.vertical .carousel-control .icon-prev, 
.carousel.vertical .carousel-control .glyphicon-chevron-up { 
    left: 50%; 
    margin-left: -10px; 
    top: 50%; 
    margin-top: -10px; 
} 
.carousel.vertical .carousel-control .icon-next, 
.carousel.vertical .carousel-control .glyphicon-chevron-down { 
    left: 50%; 
    margin-left: -10px; 
    top: 50%; 
    margin-top: -10px; 
} 
.carousel.vertical .carousel-control .icon-up, 
.carousel.vertical .carousel-control .icon-down { 
    width: 20px; 
    height: 20px; 
    line-height: 1; 
    font-family: serif; 
} 
.carousel.vertical .carousel-control .icon-prev:before { 
    content: '\2039'; 
} 
.carousel.vertical .carousel-control .icon-next:before { 
    content: '\203a'; 
} 

Answer 1

它不可能沒有嚴重的重寫。從根本上說，這個插件的工作原理是隱藏所有的幻燈片：

.carousel-inner>.item { 
    position: relative; 
    display: none; <- culprit 
    -webkit-transition: .6s ease-in-out left; 
    -o-transition: .6s ease-in-out left; 
    transition: .6s ease-in-out left; 
} 

然而，即使我們禁用規則，動畫仍然是斷開的。代碼一次顯示並重新定位一張幻燈片。

我的建議是尋找更貼近您需求的插件。