Testimonial carousel example
HTML
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-12">
<section id="testimonials" class="text-center">
<div id="testimonialCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner center-block">
<div class="item active">
<p>"It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."</p>
<p class="testimonial_author">Patrick Beeson</p>
</div>
<div class="item">
<p>"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable."</p>
<p class="testimonial_author">Bob Crazy</p>
</div>
<div class="item">
<p>"Contrary to popular belief, Lorem Ipsum is not simply random text."</p>
<p class="testimonial_author">Joe Reporter</p>
</div>
</div>
<a class="left carousel-control" href="#testimonialCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#testimonialCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</section>
</div>
</div>
</div>
CSS
/* Global */
body {
position: relative;
}
/* Nav */
.navbar-nav {
float: right;
}
.nav-bar-wrapper {
font-family: 'Source Sans Pro', sans-serif;
}
.navbar {
margin-bottom: 0;
margin-left: 25px;
margin-right: 25px;
padding: 15px;
}
.nav li a {
color: #000;
font-size: 16px;
font-weight: 200;
font-family: 'Source Sans Pro', sans-serif;
text-transform: uppercase;
}
.nav li a:hover {
background: none;
text-decoration: underline;
}
.navbar-brand {
position: relative;
bottom: 15px;
}
.full_divider {
background: url(/static/img/line_gradient.jpg) repeat-x top center;
min-height: 5px;
}
.blue_line {
border-bottom: 1px solid #03518d;
width: 300px;
margin: 50px auto;
}
footer {
padding-top: 50px;
background-color: #011a2f;
min-height: 300px;
}
footer p {
font-size: 18px;
font-weight: 200;
font-family: 'Source Sans Pro', sans-serif;
text-transform: uppercase;
color: #fff;
}
footer p a {
color: #fff;
}
footer p a:hover {
text-decoration: underline;
color: #fff;
}
/* HOMEPAGE */
/* Sections */
section h1 {
font-size: 36px;
font-family: 'Old Standard TT', serif;
color: #03518d;
font-style: italic;
}
/* Carousels */
.carousel-control.right, .carousel-control.left {
background: none;
color: #888;
}
#featuredCarousel {
margin-bottom: 25px;
}
#featuredCarousel .carousel {
height: 500px;
}
#featuredCarousel .carousel .item {
height: 500px;
}
#testimonialCarousel .carousel {
height: 175px;
}
#testimonialCarousel .item {
margin: 0 auto;
width: 50%;
}
/* About */
section#about h1 {
margin-bottom: 25px;
}
section#about p {
font-size: 16px;
font-weight: 200;
font-family: 'Source Sans Pro', sans-serif;
text-transform: uppercase;
margin: 10px auto;
width: 75%;
}
/* Employees */
section#employees {
}
#employee_list li {
padding-right: 16px;
text-transform: uppercase;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
#employee_list h2...
JavaScript
$('#testimonialCarousel').carousel({
interval: false
});