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

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
.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; } }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard React
Image Crop jQuery
Client or Partners Logo Slider
Responsive Invoice template

Questions / Comments: