Hi nicozz,
The bootstrap carousel is animated via CSS transitions, so you can convert it into a vertical slider by using some additional CSS rules.
Thankfully, someone else has already done this:
https://github.com/mcuznz/bootstrap-carousel-vertical
The problem is that their CSS ties into an additional class which isn’t present on the plugin slider. To make all carousels on your website vertical, just remove the ‘vertical’ class from the CSS.
eg:
.carousel .carousel-inner {
height: 100%;
}
.carousel .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;
left: 0;
}
.carousel .active,
.carousel .next.left,
.carousel .prev.right { top: 0; }
.carousel .next,
.carousel .active.right { top: 100%; }
.carousel .prev,
.carousel .active.left { top: -100%; }
If you include this CSS after your bootstrap CSS, you should be away. Please note that the above code is untested.
Hope this helps!
Phil
