"Fade Quote Carousel"
Bootstrap 3.2.0 Snippet by bSampson0

<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> <style> 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; } </style> <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> <li data-target="#fade-quote-carousel" data-slide-to="3"></li> <li data-target="#fade-quote-carousel" data-slide-to="4"></li> <li data-target="#fade-quote-carousel" data-slide-to="5"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"> <blockquote> <p><strong>Eric’s extensive training and educational coursework is impressive – which indicates he sees it as a profession, not a job.</strong></p> <p> <em>Paula Gadotti, retired, Oregon Law Enforcement Agency</em> </p> </blockquote> </div> <div class="item"> <blockquote> <p><strong>There is no one I would trust more as my sheriff more than Eric. He has the integrity, experience and intellect - without question.</strong></p> <p> <em>Joe DeAguero, MBA</em> </p> </blockquote> </div> <div class="item"> <blockquote> <p><strong>I have known Eric for over twenty-five years. I met him through our mutual involvement in the Sea Scout program in Portland. I know him to be reliable, industrious, resourceful, inquisitive, and above all, trustworthy. With his experience in and outside law enforcement, and his commitment to the community, he would be an excellent Sheriff.</strong></p> <p> <em>L. Patrick Kelley, Portland Police Detective, Retired</em> </p> </blockquote> </div> <div class="item"> <blockquote> <p><strong>I worked with Eric on a very large, multi-state, multi-agency theft and drug case. His key leadership in coordinating the investigation with multiple local, state and federal law enforcement agencies, along with his knowledge and drive led to over 25 people being arrested and prosecuted.</strong></p> <p> <em>Tim Thompson, District Attorney (ret.), Union County, Oregon</em> </p> </blockquote> </div> <div class="item"> <blockquote> <p><strong>Eric grew up before my eyes when he worked in our office. He was always inquisitive, wickedly smart, polite and ready for the next challenge.</strong></p> <p> <em>P Solberg, retired, AT&T</em> </p> </blockquote> </div> <div class="item"> <blockquote> <p><strong>Eric has a good strong resume... and impressive military service... Good you folks have a choice.</strong></p> <p> <em>G Pullen - Vietnam Veteran US Army</em> </p> </blockquote> </div> </div> </div> </div> </div> </div> </section>

Related: See More


Questions / Comments: