<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 class="container">
<div class="row col-md-4">
<div class="col-md-12">
<div class="col-md-12">
<h3>Marketing stuff</h3>
</div>
</div>
<div class="carousel slide vertical" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="list-unstyled">
<li class="col-md-12">
<div class="col-md-3">
<ul class="list-unstyled date">
<li class="month">JAN</li>
<li class="day">10</li>
<li class="year">2015</li>
</ul>
</div>
<div class="col-md-9">
<span class="mb8">
Men at some time are masters of their fates: The fault, dear Brutus, is not in our stars, But in ourselves, that we are underlings.
</span>
<div class="caption">
<a href="#"><h6 class="text-uppercase text-right">Read more</h6></a>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-3">
<ul class="list-unstyled date">
<li class="month">JAN</li>
<li class="day">10</li>
<li class="year">2015</li>
</ul>
</div>
<div class="col-md-9">
<span class="mb8">
Men at some time are masters of their fates: The fault, dear Brutus, is not in our stars, But in ourselves, that we are underlings.
</span>
<div class="caption">
<a href="#"><h6 class="text-uppercase text-right">Read more</h6></a>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-3">
<ul class="list-unstyled date">
<li class="month">JAN</li>
<li class="day">10</li>
<li class="year">2015</li>
</ul>
</div>
<div class="col-md-9">
<span class="mb8">
Men at some time are masters of their fates: The fault, dear Brutus, is not in our stars, But in ourselves, that we are underlings.
</span>
<div class="caption">
<a href="#"><h6 class="text-uppercase text-right">Read more</h6></a>
</div>
</div>
</li>
</ul>
</div> <!-- 1 -->
<div class="item">
<ul class="list-unstyled">
<li class="col-md-12">
<div class="col-md-3">
<ul class="list-unstyled date">
<li class="month">JAN</li>
<li class="day">10</li>
<li class="year">2015</li>
</ul>
</div>
<div class="col-md-9">
<span class="mb8">
Men at some time are masters of their fates: The fault, dear Brutus, is not in our stars, But in ourselves, that we are underlings.
</span>
<div class="caption">
<a href="#"><h6 class="text-uppercase text-right">Read more</h6></a>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-3">
<ul class="list-unstyled date">
<li class="month">JAN</li>
<li class="day">10</li>
<li class="year">2015</li>
</ul>
</div>
<div class="col-md-9">
<span class="mb8">
Men at some time are masters of their fates: The fault, dear Brutus, is not in our stars, But in ourselves, that we are underlings.
</span>
<div class="caption">
<a href="#"><h6 class="text-uppercase text-right">Read more</h6></a>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-3">
<ul class="list-unstyled date">
<li class="month">JAN</li>
<li class="day">10</li>
<li class="year">2015</li>
</ul>
</div>
<div class="col-md-9">
<span class="mb8">
Men at some time are masters of their fates: The fault, dear Brutus, is not in our stars, But in ourselves, that we are underlings.
</span>
<div class="caption">
<a href="#"><h6 class="text-uppercase text-right">Read more</h6></a>
</div>
</div>
</li>
</ul>
</div> <!-- 2 -->
</div>
<nav>
<ul class="control-box pager">
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-down"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-up"></i></a></li>
</ul>
</nav>
<!-- /.control-box -->
</div><!-- /#myCarousel -->
</div><!-- /.col-xs-12 -->
</div><!-- /.container -->
.day {
font-size : 25px;
}
.date {
text-align : center;
}
.vertical .carousel-inner {
height: 100%;
}
.carousel.vertical .item {
-webkit-transition: 0.2s ease-in-out top;
-moz-transition: 0.2s ease-in-out top;
-ms-transition: 0.2s ease-in-out top;
-o-transition: 0.2s ease-in-out top;
transition: 0.2s ease-in-out top;
}
.carousel.vertical .active {
top: 0;
}
.carousel.vertical .next {
top: 300px;
}
.carousel.vertical .prev {
top: -300px;
}
.carousel.vertical .next.left,
.carousel.vertical .prev.right {
top: 0px;
}
.carousel.vertical .active.left {
top: -300px;
}
.carousel.vertical .active.right {
top: 300px;
}
.carousel.vertical .item {
left: 0;
}
