"Fade Quote Carousel"
Bootstrap 3.2.0 Snippet by kleekich

<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


Questions / Comments: