"Testimonial Carousel"
Bootstrap 3.2.0 Snippet by nidesing

<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> </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"></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"> <div class="item"> <blockquote> <p>Adrian has been excellent getting loans for me, and allowing me to grow my property investment portfolio for the past 5 years. Adrian's dedication, communication and drive have been top notch to get the best deals for me and many friends I have referred to Adrian over the years. Thanks Adrian, keep up the good work! </p> </blockquote> <h2 class="wsite-content-title" style="text-align:center;"><font color="#ffffff">- Gary Lin, Auckland</font></h2> </div> <div class="item"> <blockquote> <p>Adrian assisted me in arranging finance around relationship property division - he gave me sound advice around mortgage structures that would be most suitable to my situation. I left everything to the last minute, which made it a difficult task but Adrian still managed to achieve the settlement date without penalty. His professionalism and advice was second to none in very stressful circumstances. Thank you Adrian </p> </blockquote> <h2 class="wsite-content-title" style="text-align:center;"><font color="#ffffff">– Sharyn Milligan, Whangarei</font></h2> </div> <div class="active item"> <blockquote> <p>Adrian is professional, extremely knowledgeable and a pleasure to deal with. He made the huge task of getting a mortgage and re-financing easy. His expertise and attention to detail made us feel secure that we, and our money, were in very safe hands. Thank you so much.</p> </blockquote> <h2 class="wsite-content-title" style="text-align:center;"><font color="#ffffff">- Carmen Lewis, Auckland</font></h2> </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


Questions / Comments: