"Fade Quote Carousel"
Bootstrap 3.2.0 Snippet by maridlcrmn

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 class="col-md-8 col-md-offset-2"> <div class="quote"><i class="fa fa-quote-left fa-4x"></i></div> <div class="carousel slide" id="fade-quote-carousel" data-ride="carousel" data-interval="3000"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#fade-quote-carousel" data-slide-to="0" class="active"></li> <li data-target="#fade-quote-carousel" data-slide-to="1"></li> <li data-target="#fade-quote-carousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p> </blockquote> <div class="profile-circle" style="background-color: rgba(0,0,0,.2);"></div> </div> <div class="item"> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p> </blockquote> <div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div> </div> <div class="item"> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p> </blockquote> <div class="profile-circle" style="background-color: rgba(145,169,216,.2);"></div> </div> </div> </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; }

Related: See More

Now UI Kit
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments:

where can you set the speed of the rotating testimonials. Nice work on this one!

MARS () - 9 years ago - Reply 0

By changing data-interval="3000" parameter

maxsurguy () - 9 years ago - Reply 0

Thank you, worked perfectly!

MARS () - 9 years ago - Reply 0

Need help, carousel-indicators showing 4 types (Numbers on the left 1,2,3,4 then in the center 4 circles overtop the bubbles and then the 5 bubbles under the circles. Tried disabling the scripts still cant find a solution. Help please. (Disregard - solved) make sure you do not have any ordered list styles in your css file.

Usyakuza () - 9 years ago - Reply 0

where do I change text color for quotes... the .quote decimal rgb changes don't work.

marclee29 () - 9 years ago - Reply 0

Hi, can you tell me how can I implement the photos onto the profile circles?

TeddyGraphics () - 9 years ago - Reply 0

In your CSS File, add :
.profile-circle > img{
width:100%;
height:100%;
border-radius: 100px;
}

And in Html:

<div class="profile-circle" style="background-color: rgba(77,5,51,.2;"> <img src="http://placehold.it/350x250"></div>

Karbonn () - 9 years ago - Reply 0