HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

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
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<div class="container" id="testimonials-row">    
<div class="row">
<div class="col-md-12 column">    
<h2 class="page-header">Testimonials <small>Our Clients Love Us!</small></h2>
<div class="carousel slide vertical" id="testimonials-rotate">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#testimonials-rotate">
</li>
<li data-slide-to="1" data-target="#testimonials-rotate">
</li>
<li data-slide-to="2" data-target="#testimonials-rotate">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">    
<div class="col-md-2"><img alt="" src="http://lorempixel.com/200/200" class="img-circle img-responsive"/></div>
<div class="testimonials col-md-10">
<h3>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. - <small>Yayo Dudemous</small>
</h3>
</div>
<div class="clearfix"></div>
</div>
<div class="item">  
<div class="col-md-2"><img alt="" src="http://lorempixel.com/200/200" class="img-circle img-responsive"/></div>
<div class="testimonials col-md-10">
<h3>
justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. - <small>Yayo Dudemous</small>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
28
29
30
31
32
33
34
35
36
.testimonials h3{
margin-top:25px;
}
.vertical .carousel-inner {
  height: 100%;
}
.carousel.vertical .item {
   -webkit-transition: 0.6s ease-in-out top;
   -moz-transition: 0.6s ease-in-out top;
   -ms-transition: 0.6s ease-in-out top;
   -o-transition: 0.6s ease-in-out top;
   transition: 0.6s ease-in-out top;
}
.carousel.vertical .active {
   top: 0;
}
.carousel.vertical .next {
   top: 400px;
}
.carousel.vertical .prev {
   top: -400px;
}
.carousel.vertical .next.left,
.carousel.vertical .prev.right {
   top: 0;
}
.carousel.vertical .active.left {
   top: -400px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('.carousel').carousel({
   interval: 1000
})
$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
  
  for (var i=0;i<1;i++) {
    next=next.next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    
    next.children(':first-child').clone().appendTo($(this));
  }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

""Testimonial Responsive Template with Carousel / Slide - Upside Down""
Bootstrap 3.3.0 Snippet by pixelangel

Related: See More

Questions / Comments:

""Testimonial Responsive Template with Carousel / Slide - Upside Down"" Bootstrap 3.3.0 Snippet by pixelangel

Related: See More

Questions / Comments:

""Testimonial Responsive Template with Carousel / Slide - Upside Down""
Bootstrap 3.3.0 Snippet by pixelangel