javascript – Bootstrap轮播从上到下而不是从左到右动画

bootstrap carousel中是否有任何选项可以将其设置为从上到下,从下到上,而不是从右到左,从左到右.

jsFiddle

最佳答案
您可以使用此代码更改轮播的方向(最后的JSFiddle示例)



Pay attention to the CSS vertical class selector

CSS :(改变旋转木马方向的本质)

.vertical .carousel-inner {
  height: 100%;
}

.carousel.vertical .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 .next {
   top: 400px;
}

.carousel.vertical .prev {
   top: -400px;
}

.carousel.vertical .next.left,.carousel.vertical .prev.right {
   top: 0;
}

.carousel.vertical .active.left {
   top: -400px;
}

.carousel.vertical .active.right {
   top: 400px;
}

.carousel.vertical .item {
   left: 0;
}

使用Javascript：

$('.carousel').carousel({
   interval: 3000
})

HTML：


你可以在这里看到它：http://jsfiddle.net/wram2h2p/
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!