<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="carousel-example-generic" class="carousel slide showcase" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <!-- slide code <div class="item active"> <a href="..."><img src="..." alt="..."></a> <div class="carousel-caption"> ... </div> </div> --> <div class="item active"> <img src="http://d1nr5wevwcuzuv.cloudfront.net/product_photos/40152624/1459635774-gppok_1-final-american-apparel-white-2406-4x4_400sq.png" alt="thign 1."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="http://dzasv7x7a867v.cloudfront.net/product_photos/27471041/tumblr_ni31sglw3j1u3zusno1_1280_5B1_5D_400sq.jpg" alt="thing 2"> <div class="carousel-caption"> <a href="www.google.com">opossum</a> </div> </div> </div> <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>

.showcase { width: 300px; } .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; }​