<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 ---------->
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
</head>
<section id="carousel">
<div class="container">
<div class="row">
<div>
<div class="quote"><i class="fa fa-quote-left fa-2x"></i></div>
<div class="carousel slide" id="fade-quote-carousel" data-ride="carousel" data-interval="6000">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#fade-quote-carousel" data-slide-to="0"></li>
<li data-target="#fade-quote-carousel" data-slide-to="1"></li>
<li data-target="#fade-quote-carousel" data-slide-to="2" class="active"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner" role="listbox">
<div class="item">
<div class="col-md-1" style="width: 12.499999995%"></div>
<div class="col-sm-3">
<blockquote>
<img class="img-circle img-thumbnail" src="http://lorempixel.com/400/400/people/8/">
<p class="clients-words">Hi there, We just bought Estela is llery of free bootstrap snippet</p>
<span class="clients-name text-primary">— Armand corey</span>
</blockquote>
</div>
<div class="col-sm-3">
<blockquote>
<img class="img-circle img-thumbnail" src="http://lorempixel.com/400/400/people/5/">
<p class="clients-words">Awesome Bootstrap snippets! Check it out! </p>
<span class="clients-name text-primary">— Factory nn (@facnnteam)</span>
</blockquote>
</div>
<div class="col-sm-3">
<blockquote>
<img class="img-circle img-thumbnail" src="http://lorempixel.com/400/400/people/6/">
<p class="clients-words">copy paste my snippets for other users very easy</p>
<span class="clients-name text-primary">— Big daniel mont</span>
</blockquote>
</div>
<div class="col-md-1" style="width: 12.499999995%"></div>
</div>
<div class="item">
<div class="col-md-1" style="width: 12.499999995%"></div>
<div class="col-sm-3">
<blockquote>
<img class="img-circle img-thumbnail" src="http://lorempixel.com/400/400/people/8/">
<p class="clients-words">Hi there, We just bought Estela is llery of free bootstrap snippet</p>
<span class="clients-name text-primary">— Armand corey</span>
</blockquote>
</div>
<div class="col-sm-3">
<blockquote>
<img class="img-circle img-thumbnail" src="http://lorempixel.com/400/400/people/6/">
<p class="clients-words">copy paste my snippets for other users very easy</p>
<span class="clients-name text-primary">— Big daniel mont</span>
</blockquote>
</div>
<div class="col-sm-3">
<blockquote>
<img class="img-circle img-thumbnail" src="http://lorempixel.com/400/400/people/5/">
<p class="clients-words">Awesome Bootstrap snippets! Check it out! </p>
<span class="clients-name text-primary">— Factory nn (@facnnteam)</span>
</blockquote>
</div>
<div class="col-md-1" style="width: 12.499999995%"></div>
</div>
<div class="active item">
<div class="col-md-1" style="width: 12.499999995%"></div>
<div class="col-sm-3">
<blockquote>
<img class="img-circle img-thumbnail" src="http://lorempixel.com/400/400/people/6/">
<p class="clients-words">copy paste my snippets for other users very easy</p>
<span class="clients-name text-primary">— Big daniel mont</span>
</blockquote>
</div>
<div class="col-sm-3">
<blockquote>
<img class="img-circle img-thumbnail" src="http://lorempixel.com/400/400/people/8/">
<p class="clients-words">Hi there, We just bought Estela is llery of free bootstrap snippet</p>
<span class="clients-name text-primary">— Armand corey</span>
</blockquote>
</div>
<div class="col-sm-3">
<blockquote>
<img class="img-circle img-thumbnail" src="http://lorempixel.com/400/400/people/5/">
<p class="clients-words">Awesome Bootstrap snippets! Check it out! </p>
<span class="clients-name text-primary">— Factory nn (@facnnteam)</span>
</blockquote>
</div>
<div class="col-md-1" style="width: 12.499999995%"></div>
</div>
</div>
<a class="left carousel-control" href="#fade-quote-carousel" role="button" data-slide="prev">
<span class="fa fa-chevron-left fa-4x" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#fade-quote-carousel" role="button" data-slide="next">
<span class="fa fa-chevron-right fa-4x" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</section>
/*-------------------------------*/
/* Code snippet by */
/* @maridlcrmn */
/*-------------------------------*/
section {
padding-top: 100px;
padding-bottom: 100px;
}
.quote {
color: rgba(0,0,0,.1);
text-align: center;
margin-bottom: 30px;
}
/*-------------------------------*/
/* Carousel Fade Transition */
/*-------------------------------*/
#fade-quote-carousel.carousel {
padding-bottom: 60px;
}
#fade-quote-carousel.carousel .carousel-inner .item {
opacity: 0;
-webkit-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
#fade-quote-carousel.carousel .carousel-inner .active {
opacity: 1;
-webkit-transition-property: opacity;
-ms-transition-property: opacity;
transition-property: opacity;
}
#fade-quote-carousel.carousel .carousel-indicators {
bottom: 10px;
}
#fade-quote-carousel.carousel .carousel-indicators > li {
background-color: #e84a64;
border: none;
}
#fade-quote-carousel blockquote {
text-align: center;
border: none;
}
#fade-quote-carousel .profile-circle {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 100px;
}
.carousel-control.left {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
left: auto;
right: 0;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.carousel-control:hover,
.carousel-control:focus {
outline: 0;
color: #fff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .fa-chevron-left,
.carousel-control .fa-chevron-right{
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 5;
display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left,
.carousel-control .fa-chevron-left{
left: 50%;
margin-left: -10px;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right,
.carousel-control .fa-chevron-right{
right: 50%;
margin-right: -10px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 20px;
height: 20px;
line-height: 1;
font-family: serif;
}
.carousel-control .icon-prev:before {
content: '\2039';
}
.carousel-control .icon-next:before {
content: '\203a';
}
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
border: 1px solid #fff;
border-radius: 10px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
}
.carousel-indicators .active {
margin: 0;
width: 12px;
height: 12px;
background-color: #fff;
}
.carousel-caption {
position: absolute;
left: 15%;
right: 15%;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
