Is it possible to implement vertical carousel sliding widh Twitter Bootstrap? In bootstrap.js I find this
, slide: function (type, next) {
var $active =
The solutions provided in the previous answers do not work properly on some popular browsers (like Google Chrome) when used with the latest (current) version of Bootstrap (v3.3.4).
In case anyone needs an updated solution that works with Bootstrap v3.3.4, here it is --
.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%;
}
Note: add the vertical
class to your carousel-inner
, or edit the CSS as you like.