<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script>
<h1>What You Say Now</h1>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<div class="row">
<div class="col-sm-12">
<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.”</p>
<small><strong>Vulputate M., Dolor</strong></small>
</div>
</div>
</div>
<!-- Quote 2 -->
<div class="item">
<div class="row">
<div class="col-sm-12">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.”</p>
<small><strong>Fringilla A., Vulputate Sit</strong></small>
</div>
</div>
</div>
<!-- Quote 3 -->
<div class="item">
<div class="row">
<div class="col-sm-12">
<p>“In one word.. WOW! Theresa Founder of Courageous Womens Foundation..”</p>
<small><strong>Theresa</strong></small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/* carousel */
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 30px;
text-align:center;
}
/* indicator position */
#quote-carousel .carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
color:#60dfe5;
}
/* indicator color */
#quote-carousel .carousel-indicators li {
background: #333333;
height:4px;
width:50px;
}
/* active indicator */
#quote-carousel .carousel-indicators .active {
background: #60dfe5;
height:4x;
width:50px;
margin-bottom:1px;
}
/* typography */
h1 {
text-align:center;
margin-bottom:-20px !important;
}
p {
font-style:italic;
}
$(document).ready(function() {
//carousel options
$('#quote-carousel').carousel({
pause: true, interval: 10000,
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.