Twitter的Bootstrap旋转木马垂直滑动
是否有可能实现垂直旋转木马滑动widh Twitter的Bootstrap？ 在bootstrap.js中我find了这个
, slide: function (type, next) { var $active = this.$element.find('.active') , $next = next || $active[type]() , isCycling = this.interval , direction = type == 'next' ? 'left' : 'right' , fallback = type == 'next' ? 'first' : 'last' , that = this 我试图改变方向“上”和“下”，但滑动不工作。
是。
下面是一个很好的方法来做到这一点，它只是简单地覆盖CSS。
如果你添加一个vertical于你的旋转木马的类，那么把下面的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: 100%; } .carousel.vertical .prev { top: -100%; } .carousel.vertical .next.left, .carousel.vertical .prev.right { top: 0; } .carousel.vertical .active.left { top: -100%; } .carousel.vertical .active.right { top: 100%; } .carousel.vertical .item { left: 0; }
这基本上是把所有东西都放在carousel.less中，然后left改变。
的jsfiddle
这至less表明你需要做什么才能让它垂直滑动。 然而，在实践中，一个真正的应该加起来和down类carousel.less，并添加一个新的选项bootstrap-carousel.js之间切换。
以前的答案中提供的解决scheme在使用最新（当前）版本的Bootstrap（v3.3.4）时，在某些stream行的浏览器（如Google Chrome）上无法正常工作。
如果有人需要使用Bootstrap v3.3.4的更新解决scheme，
.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; } @media all and (transform-3d), (-webkit-transform-3d) { .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; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; } .carousel-inner.vertical > .item.next, .carousel-inner.vertical > .item.active.right { top: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .carousel-inner.vertical > .item.prev, .carousel-inner.vertical > .item.active.left { top: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .carousel-inner.vertical > .item.next.left, .carousel-inner.vertical > .item.prev.right, .carousel-inner.vertical > .item.active { top: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .carousel-inner.vertical > .active { top: 0; } .carousel-inner.vertical > .next, .carousel-inner.vertical > .prev { top: 0; height: 100%; width: auto; } .carousel-inner.vertical > .next { left: 0; top: 100%; } .carousel-inner.vertical > .prev { left: 0; top: -100% } .carousel-inner.vertical > .next.left, .carousel-inner.vertical > .prev.right { top: 0; } .carousel-inner.vertical > .active.left { left: 0; top: -100%; } .carousel-inner.vertical > .active.right { left: 0; top: 100%; }
<link href="bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div style="width:600px"> <!-- wrap @img width --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner vertical" role="listbox"> <div class="item active"> <img src="http://placehold.it/600x400&text=First+Slide" alt="First Slide"> <div class="carousel-caption"> First Slide </div> </div> <div class="item"> <img src="http://placehold.it/600x400&text=Second+Slide" alt="Second Slide"> <div class="carousel-caption"> Second Slide </div> </div> <div class="item"> <img src="http://placehold.it/600x400&text=Third+Slide" alt="Third Slide"> <div class="carousel-caption"> Third Slide </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>
试试这个插件https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel
看看这里。
Twitter的引导垂直缩略图旋转木马
