There are two types of testimonials:
- .ct-testimonials
- .ct-testimonials–light
.ct-testimonials is a standard class for default styling, if you add .ct-testimonials–light it will change decoration to motive color.
Testimonials
HTML markup:
|
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 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<div class="ct-testimonials"> <div class="row ct-u-marginBottom60"> <ul class="list-unstyled" role="tablist"> <li role="presentation" class="col-xs-2 active ct-u-paddingBottom60"><a href="#testimonials-01" role="tab" data-toggle="tab"><img class="img-responsive" draggable="false" src="assets/images/demo-content/content-testimonials-1.png" alt="Team Member"></a></li> <li role="presentation" class="col-xs-2 ct-u-paddingBottom60"><a href="#testimonials-02" role="tab" data-toggle="tab"><img class="img-responsive" src="assets/images/demo-content/content-testimonials-2.png" alt="Team Member"></a></li> <li role="presentation" class="col-xs-2 ct-u-paddingBottom60"><a href="#testimonials-03" role="tab" data-toggle="tab"><img class="img-responsive" draggable="false" src="assets/images/demo-content/content-testimonials-3.png" alt="Team Member"></a></li> <li role="presentation" class="col-xs-2 ct-u-paddingBottom60"><a href="#testimonials-04" role="tab" data-toggle="tab"><img class="img-responsive" src="assets/images/demo-content/content-testimonials-4.png" alt="Team Member"></a></li> <li role="presentation" class="col-xs-2 ct-u-paddingBottom60"><a href="#testimonials-05" role="tab" data-toggle="tab"><img class="img-responsive" draggable="false" src="assets/images/demo-content/content-testimonials-5.png" alt="Team Member"></a></li> <li role="presentation" class="col-xs-2 ct-u-paddingBottom60"><a href="#testimonials-06" role="tab" data-toggle="tab"><img class="img-responsive" src="assets/images/demo-content/content-testimonials-6.png" alt="Team Member"></a></li> </ul> </div> <div class="tab-content center-block"> <div role="tabpanel" class="tab-pane row" id="testimonials-01"> <div class="animated fadeIn"> <p class="">Totally impressed with Estato. Very easy to use and it really has a lot of features.</p> <span class="">John Doe - Company inc.</span> </div> </div> <div role="tabpanel" class="tab-pane active row" id="testimonials-02"> <div class="animated fadeIn"> <p class="">Totally impressed with Estato. Very easy to use and it really has a lot of features.</p> <span class="">Anna Ferguson - Company inc.</span> </div> </div> <div role="tabpanel" class="tab-pane row" id="testimonials-03"> <div class="animated fadeIn"> <p class="">Totally impressed with Estato. Very easy to use and it really has a lot of features.</p> <span class="">Jane Foster - Company inc.</span> </div> </div> <div role="tabpanel" class="tab-pane row" id="testimonials-04"> <div class="animated fadeIn"> <p class=" ct-u-marginBottom0">Totally impressed with Estato. Very easy to use and it really has a lot of features.</p> <span class="">John Doe - Company inc.</span> </div> </div> <div role="tabpanel" class="tab-pane row" id="testimonials-05"> <div class="animated fadeIn"> <p class="">Totally impressed with Estato. Very easy to use and it really has a lot of features.</p> <span class="">John Doe - Company inc.</span> </div> </div> <div role="tabpanel" class="tab-pane row" id="testimonials-06"> <div class=" animated fadeIn"> <p class="">Totally impressed with Estato. Very easy to use and it really has a lot of features.</p> <span class="">John Doe - Company inc.</span> </div> </div> </div> </div> |
Remember to attach to HTML also the following script:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var tabChange = function(){ var tabs = $('.ct-testimonials > .row > ul > li'); var active = tabs.filter('.active'); var next = active.next('li').length ? active.next('li').find('a') : tabs.filter(':first-child').find('a'); next.tab('show'); }; var tabCycle = setInterval(tabChange, 5000); //-------------------------------------------------------------------------------------- $('.ct-testimonials > .row > ul > li > a').on('click', function (e) { e.preventDefault(); // Stop the cycle clearInterval(tabCycle); // Show the clicked tabs associated tab-pane $(this).tab('show'); // Start the cycle again in a predefined amount of time tabCycle = setInterval(tabChange, 5000); return false; }); |