<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';
}
