"Responsive Testimonial Carousel Slider with Image (Easy to Edit)"
Bootstrap 3.2.0 Snippet by Tori

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 ----------> <html lang="en"> <head> <meta charset="utf-8"> <meta name="robots" content="noindex"> <title>Testimonials with Carousel - Bootsnipp.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <style type="text/css"> .carousel-indicators .active{ background: #31708f; } .content{ margin-top:20px; } .adjust1{ float:left; width:100%; margin-bottom:0; } .adjust2{ margin:0; } .carousel-indicators li{ border :1px solid #ccc; } .carousel-control{ color:#31708f; width:5%; } .carousel-control:hover, .carousel-control:focus{ color:#31708f; } .carousel-control.left, .carousel-control.right { background-image: none; } .media-object{ margin:auto; margin-top:15%; } @media screen and (max-width: 768px) { .media-object{ margin-top:0; } } </style> </head> <body> <div class="content"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <data-target="#carousel-example-generic" data-slide-to="0" class="active"> <data-target="#carousel-example-generic" data-slide-to="1"> <data-target="#carousel-example-generic" data-slide-to="2"> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-xs-12"> <div class="thumbnail adjust1"> <div class="col-md-2 col-sm-2 col-xs-12"> <img class="media-object img-rounded img-responsive" src="http://www.weebly.com/editor/uploads/1/6/5/0/16501368/custom_themes/191733651750556625/files/temp-img1.jpg"> </div> <div class="col-md-10 col-sm-10 col-xs-12"> <div class="caption"> <p class="text-info lead adjust2"><span class="glyphicon glyphicon-thumbs-up btn-lg"></span> <u> TESTIMONIAL1</u> </p><br> <p> This is my testimonial. Not only is it MY testimonial, but it is the BEST one ever written! and blah blah bloo blah …blah.</p></p> <blockquote class="adjust2"> <p>Jane Doe - 28<br>Secretary<br>Omaha NE</p> <i class="glyphicon glyphicon-globe"></i> www.mywebsite.com</cite></small> </blockquote> </div> </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-xs-12"> <div class="thumbnail adjust1"> <div class="col-md-2 col-sm-2 col-xs-12"> <img class="media-object img-rounded img-responsive" src="http://www.weebly.com/editor/uploads/1/6/5/0/16501368/custom_themes/191733651750556625/files/temp-img2.jpg"> </div> <div class="col-md-10 col-sm-10 col-xs-12"> <div class="caption"> <p class="text-info lead adjust2"><span class="glyphicon glyphicon-thumbs-up btn-lg"></span><u> TESTIMONIAL 2</u> </p><br> <p> This is my testimonial. Not only is it MY testimonial, but it is the BEST one ever written! and blah blah bloo blah …blah.</p></p> <blockquote class="adjust2"> <p>John Doe - 32<br>Accountant<br>San Francisco, California</p> </p> <i class="glyphicon glyphicon-globe"></i> www.mywebsite.com</cite></small> </blockquote> </div> </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-xs-12"> <div class="thumbnail adjust1"> <div class="col-md-2 col-sm-2 col-xs-12"> <img class="media-object img-rounded img-responsive" src="http://www.weebly.com/editor/uploads/1/6/5/0/16501368/custom_themes/191733651750556625/files/temp-img3.jpg"> </div> <div class="col-md-10 col-sm-10 col-xs-12"> <div class="caption"> <p class="text-info lead adjust2"><span class="glyphicon glyphicon-thumbs-up btn-lg"></span> <u> TESTIMONIAL 3</u> </p><br> <p></p> <p> This is my testimonial. Not only is it MY testimonial, but it is the BEST one ever written! and blah blah bloo blah …blah.</p></p> <blockquote class="adjust2"> <p>Jane Doe II - 44<br>Web Developer<br>Boulder CO</p> <i class="glyphicon glyphicon-globe"></i> www.mywebsite.com</cite></small> </blockquote> </div> </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-xs-12"> <div class="thumbnail adjust1"> <div class="col-md-2 col-sm-2 col-xs-12"> <img class="media-object img-rounded img-responsive" src="http://www.weebly.com/editor/uploads/1/6/5/0/16501368/custom_themes/191733651750556625/files/temp-img4.jpg"> </div> <div class="col-md-10 col-sm-10 col-xs-12"> <div class="caption"> <p class="text-info lead adjust2"><span class="glyphicon glyphicon-thumbs-up btn-lg"> <u> TESTIMONIAL 4</u> </p><br> <p></p> <p></span> This is my testimonial. Not only is it MY testimonial, but it is the BEST one ever written! and blah blah bloo blah …blah.</p></p> <blockquote class="adjust2"><p>John Doe II - 51<br>Dermatologist<br>Los Angeles CA</p> <i class="glyphicon glyphicon-globe"></i> www.mywebsite.com</cite></small> </blockquote> </div> </div> </div> </div> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class=""></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class=""></span> </a> </div> </div> <script> $('.carousel').carousel({ interval: 9000 }) </body> </html>
.carousel-indicators .active{ background: #31708f; } .content{ margin-top:20px; } .adjust1{ float:left; width:100%; margin-bottom:0; } .adjust2{ margin:0; } .carousel-indicators li{ border :1px solid #ccc; } .carousel-control{ color:#31708f; width:5%; } .carousel-control:hover, .carousel-control:focus{ color:#31708f; } .carousel-control.left, .carousel-control.right { background-image: none; } .media-object{ margin:auto; margin-top:15%; } @media screen and (max-width: 768px) { .media-object{ margin-top:0; } }
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript"> window.alert = function(){}; var defaultCSS = document.getElementById('bootstrap-css'); function changeCSS(css){ if(css) $('head > link').filter(':first').replace With('<link rel="stylesheet" href="'+ css +'" type="text/css" />'); else $('head > link').filter(':first').replaceWith(defaultCSS); } $( document ).ready(function() { var iframe_height = parent($('html').height()); window.parent.postMessage( iframe_height, 'http://bootsnipp.com'); }); </script> <script> $('.carousel').carousel({ interval: 9000 }) </script> <script type="text/javascript"> </script>

Related: See More

Paper Bootstrap Wizard
Image Crop jQuery
Client or Partners Logo Slider
Responsive Invoice template

Questions / Comments: