<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="robots" CONTENT="all">
<title>Responsive Testimonial Carousel Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1"></head><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> <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').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />'); else $('head > link').filter(':first').replaceWith(defaultCSS); } $( document ).ready(function() { var iframe_height = parseInt($('html').height()); window.parent.postMessage( iframe_height, 'http://bootsnipp.com'); }); </script>
<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> TESTIMONIAL 1</u> </p><br> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </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> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</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> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</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> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</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"> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class=""></span> </div> </div>
<script>
$('.carousel').carousel({ interval: 9000 })
</script> <script type="text/javascript">
</script> </body></html>
