Bootstrap 3垂直旋转木马幻灯片过渡问题

Question

我只需要有关旋转木马滑动过渡问题的帮助，我在这里

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

当你点击下一个/上一个时，你可以看到有一个小故障会移除图像（幻灯片下降然后上升）。这只发生在boostrap 3.3.5上，在3.0上运行正常。但我需要让它在3.3.5上工作。

任何帮助都将不胜感激。

谢谢：）

幔

Answer 1

以下是垂直转盘的css / js更改（以防链接无法正常工作）

注意：如果您希望每个项目有更多/更少的幻灯片，请计算百分比（100 / num_of_slides_per_item）并更新＆＃34; translate3d（0，new_val_here％，0）;＆＃34;。

＆＃13;

＆＃13;

$('.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) {
    	next = $(this).siblings(':first');
  	}
    
    next.children(':first-child').clone().appendTo($(this));
  }
});

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;