Bootstrap Vertical Carousel ('-' * 27) 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.
A Pen by Dan Stuart on CodePen.
Bootstrap Vertical Carousel ('-' * 27) 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.
A Pen by Dan Stuart on CodePen.
<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; | |
> .item { | |
width: auto; | |
padding-right: 50px; | |
transition: 0.6s ease-in-out top; | |
@media all and (transform-3d), (-webkit-transform-3d) { | |
transition: 0.6s ease-in-out; | |
&.next, | |
&.active.right { | |
transform: translate3d(0, 100%, 0); | |
top: 0; | |
} | |
&.prev, | |
&.active.left { | |
transform: translate3d(0, -100%, 0); | |
top: 0; | |
} | |
&.next.left, | |
&.prev.right, | |
&.active { | |
transform: translate3d(0, 0, 0); | |
top: 0; | |
} | |
} | |
} | |
> .active, | |
> .next, | |
> .prev { | |
display: block; | |
} | |
> .active { | |
top: 0; | |
} | |
> .next, | |
> .prev { | |
position: absolute; | |
top: 0; | |
width: 100%; | |
} | |
> .next { | |
top: 100%; | |
} | |
> .prev { | |
top: -100%; | |
} | |
> .next.left, | |
> .prev.right { | |
top: 0; | |
} | |
> .active.left { | |
top: -100%; | |
} | |
> .active.right { | |
top: 100%; | |
} | |
} | |
.carousel.vertical { | |
.carousel-control { | |
left: auto; | |
width: 50px; | |
&.up { | |
top: 0; | |
right: 0; | |
bottom: 50%; | |
} | |
&.down { | |
top: 50%; | |
right: 0; | |
bottom: 0; | |
} | |
// Toggles | |
.icon-prev, | |
.icon-next, | |
.glyphicon-chevron-up, | |
.glyphicon-chevron-down { | |
position: absolute; | |
top: 50%; | |
z-index: 5; | |
display: inline-block; | |
} | |
.icon-prev, | |
.glyphicon-chevron-up { | |
left: 50%; | |
margin-left: -10px; | |
top: 50%; | |
margin-top: -10px; | |
} | |
.icon-next, | |
.glyphicon-chevron-down { | |
left: 50%; | |
margin-left: -10px; | |
top: 50%; | |
margin-top: -10px; | |
} | |
.icon-up, | |
.icon-down { | |
width: 20px; | |
height: 20px; | |
//margin-top: -10px; | |
line-height: 1; | |
font-family: serif; | |
} | |
.icon-prev { | |
&:before { | |
content: '\2039'; | |
// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) | |
} | |
} | |
.icon-next { | |
&:before { | |
content: '\203a'; | |
// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) | |
} | |
} | |
} | |
} |