Twitter Bootstrap carrusel deslizamiento vertical

¿Es posible implementar un carrusel vertical deslizante con Twitter Bootstrap? En bootstrap.js encuentro esto

, 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 

Traté de cambiar la dirección a “arriba” y “abajo”, pero no funcionaba.

Sí.

A continuación se muestra una forma ingeniosa de hacerlo, que hace todo simplemente reemplazando el CSS.

Si agrega una clase vertical a su carrusel, agregar el siguiente CSS a la página anulará el deslizamiento para que sea vertical:

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

Esto es básicamente tomar todo en carrusel.less y cambiar de left a top .

JSFiddle


Esto al menos indica lo que debe hacer para que se deslice verticalmente. Sin embargo, en la práctica, uno realmente debería agregar clases up y down al carrusel.less y agregar una nueva opción a bootstrap-carrusel.js para alternar entre ellas.

Las soluciones proporcionadas en las respuestas anteriores no funcionan correctamente en algunos navegadores populares (como Google Chrome) cuando se utilizan con la última versión (actual) de Bootstrap (v3.3.4).

En caso de que alguien necesite una solución actualizada que funcione con Bootstrap v3.3.4, aquí está:

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

Pruebe este complemento https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

Y echa un vistazo aquí.

Twitter Bootstrap Vertical Thumbnail Carrusel