引导3垂直传送带幻灯片过渡问题

Question

我只需要在旋转木马幻灯片过渡问题上帮助我在这里

http://www.codeply.com/go/DtjOb6gabE

你可以看到有一个小毛刺从而消除图像（幻灯片下降和上升）当你点击next/prev。这只发生在boostrap 3.3.5上，并在3.0上正常工作。但我需要让它在3.3.5上工作。

任何帮助，将不胜感激。

谢谢:)

幔

Answer 1

这里是CSS/JS改变为垂直传送带（以防万一链接不起作用）

注：如果您想每多/少幻灯片项目，按（100/num_of_slides_per_item）计算百分比并更新“translate3d（0，new_val_here％，0）;”。

$('.carousel .vertical .item').each(function(){ 
 
    var next = $(this).next(); 
 
    if (!next.length) { 
 
    next = $(this).siblings(':first'); 
 
    } 
 
    next.children(':first-child').clone().appendTo($(this)); 
 
    
 
    for (var i=1;i<2;i++) { 
 
    next=next.next(); 
 
    if (!next.length) { 
 
    \t next = $(this).siblings(':first'); 
 
    \t } 
 
    
 
    next.children(':first-child').clone().appendTo($(this)); 
 
    } 
 
});

.carousel-inner.vertical { 
 
    height: 100%; 
 
} 
 
.carousel-inner.vertical > .item { 
 
    -webkit-transition: .6s ease-in-out top; 
 
    -o-transition: .6s ease-in-out top; 
 
    transition: .6s ease-in-out top; 
 
} 
 

 

 
    .carousel-inner.vertical > .item { 
 
    -webkit-transition: -webkit-transform .6s ease-in-out; 
 
    -o-transition: -o-transform .6s ease-in-out; 
 
    transition: transform .6s ease-in-out; 
 
    } 
 
    .carousel-inner.vertical > .item.next, 
 
    .carousel-inner.vertical > .item.active.right { 
 
    -webkit-transform: translate3d(0, 33.33%, 0); 
 
    transform: translate3d(0, 33.33%, 0); 
 
    top: 0; 
 
    } 
 
    .carousel-inner.vertical > .item.prev, 
 
    .carousel-inner.vertical > .item.active.left { 
 
    -webkit-transform: translate3d(0, -33.33%, 0); 
 
    transform: translate3d(0, -33.33%, 0); 
 
    top: 0; 
 
    } 
 
    .carousel-inner.vertical > .item.next.left, 
 
    .carousel-inner.vertical > .item.prev.right, 
 
    .carousel-inner.vertical > .item.active { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    top: 0; 
 
    } 
 
    
 
#myCarousel .carousel-control.left { 
 
    bottom: initial; 
 
    width: 100%; 
 
} 
 
#myCarousel .carousel-control.right { 
 
    top: initial; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
      <div id="myCarousel" class="carousel slide " data-ride="carousel" data-interval="50000000"> 
 
       <!-- Carousel items --> 
 
       <div class="carousel-inner vertical"> 
 
        <div class="active item"> 
 
         <img src="http://placehold.it/600/f44336/000000&amp;text=First+Slide" class="img-responsive"> 
 
        </div> 
 
        <div class="item"> 
 
         <img src="http://placehold.it/600/e91e63/000000&amp;text=Second+Slide" class="img-responsive"> 
 
        </div> 
 
        <div class="item"> 
 
         <img src="http://placehold.it/600/9c27b0/000000&amp;text=Third+Slide" class="img-responsive"> 
 
        </div> 
 
       </div> 
 
       <!-- Carousel nav --> 
 
       <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
        <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span> 
 
        <span class="sr-only">Previous</span> 
 
       </a> 
 
       <a class="right carousel-control" href="#myCarousel" 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> 
 
</div>