"Bootstrap Vertical Carousel"
Bootstrap 3.3.0 Snippet by sonywang

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="page-header"> <h1>Bootstrap Vertical Carousel</h1> <p class="lead">Out of the box, Bootstrap only comes with a traditional horizontal carousel. This Pen has the HTML and CSS to get it to animate vertically with up/down carousel controls.</p> </div> </div> <div class="bg-info"> <div class="container"> <div id="carousel-example-vertical" class="carousel vertical slide"> <div class="carousel-inner" role="listbox"> <div class="item active"> <p class="ticker-headline"> <a href="#"> <strong>Article Headline 1</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi. </a> </p> </div> <div class="item"> <p class="ticker-headline"> <a href="#"> <strong>Article Headline 2</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi. </a> </p> </div> <div class="item"> <p class="ticker-headline"> <a href="#"> <strong>Article Headline 3</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi. </a> </p> </div> <div class="item"> <p class="ticker-headline"> <a href="#"> <strong>Article Headline 4</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi. </a> </p> </div> <div class="item"> <p class="ticker-headline"> <a href="#"> <strong>Article Headline 5</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi. </a> </p> </div> </div> <!-- Controls --> <a class="up carousel-control" href="#carousel-example-vertical" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="down carousel-control" href="#carousel-example-vertical" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div>
body { margin: 50px 0; } .ticker-headline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 15px 0; margin: 0; font-size: 18px; } .carousel.vertical .carousel-inner { height: 100%; width: auto; } .carousel.vertical .carousel-inner > .item { width: auto; padding-right: 50px; transition: 0.6s ease-in-out top; } @media all and (transform-3d), (-webkit-transform-3d) { .carousel.vertical .carousel-inner > .item { transition: 0.6s ease-in-out; } .carousel.vertical .carousel-inner > .item.next, .carousel.vertical .carousel-inner > .item.active.right { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); top: 0; } .carousel.vertical .carousel-inner > .item.prev, .carousel.vertical .carousel-inner > .item.active.left { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); top: 0; } .carousel.vertical .carousel-inner > .item.next.left, .carousel.vertical .carousel-inner > .item.prev.right, .carousel.vertical .carousel-inner > .item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); top: 0; } } .carousel.vertical .carousel-inner > .active, .carousel.vertical .carousel-inner > .next, .carousel.vertical .carousel-inner > .prev { display: block; } .carousel.vertical .carousel-inner > .active { top: 0; } .carousel.vertical .carousel-inner > .next, .carousel.vertical .carousel-inner > .prev { position: absolute; top: 0; width: 100%; } .carousel.vertical .carousel-inner > .next { top: 100%; } .carousel.vertical .carousel-inner > .prev { top: -100%; } .carousel.vertical .carousel-inner > .next.left, .carousel.vertical .carousel-inner > .prev.right { top: 0; } .carousel.vertical .carousel-inner > .active.left { top: -100%; } .carousel.vertical .carousel-inner > .active.right { top: 100%; } .carousel.vertical .carousel-control { left: auto; width: 50px; } .carousel.vertical .carousel-control.up { top: 0; right: 0; bottom: 50%; } .carousel.vertical .carousel-control.down { top: 50%; right: 0; bottom: 0; } .carousel.vertical .carousel-control .icon-prev, .carousel.vertical .carousel-control .icon-next, .carousel.vertical .carousel-control .glyphicon-chevron-up, .carousel.vertical .carousel-control .glyphicon-chevron-down { position: absolute; top: 50%; z-index: 5; display: inline-block; } .carousel.vertical .carousel-control .icon-prev, .carousel.vertical .carousel-control .glyphicon-chevron-up { left: 50%; margin-left: -10px; top: 50%; margin-top: -10px; } .carousel.vertical .carousel-control .icon-next, .carousel.vertical .carousel-control .glyphicon-chevron-down { left: 50%; margin-left: -10px; top: 50%; margin-top: -10px; } .carousel.vertical .carousel-control .icon-up, .carousel.vertical .carousel-control .icon-down { width: 20px; height: 20px; line-height: 1; font-family: serif; } .carousel.vertical .carousel-control .icon-prev:before { content: '\2039'; } .carousel.vertical .carousel-control .icon-next:before { content: '\203a'; }

Related: See More


Questions / Comments: