HTML markup – example for one item
|
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 |
<div class="ct-testimonials"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="ct-testimonials-nav"> <div class="ct-slick slider-nav" data-snap-ignore="true"> <div class="item"> <img src="../assets/images/demo-content/testimonial-thumb-1.jpg" class="center-block" alt="Image"> </div> </div> </div> </div> </div> </div> <div class="ct-testimonials-content"> <div class="ct-slick slider-for" data-snap-ignore="true"> <div class="item"> <div class="ct-testimonials-description"> <div class="ct-testimonials-textContent"> <header class="ct-testimonials-header"> <h2 class="ct-testimonial-author text-capitalize">Serena Jhonsons</h2> <p class="ct-testimonial-citation ct-fs-i">“It was more than we expected or hoped for.”</p> </header> <p class="ct-u-marginBoth30 ct-u-colorWhite">After three nights at Youth Hostel we had a great time, I was very impressed with the way the hostel is managed, all the personnel at the front desk were very nice and helpful, some of them were very excited that they were able to practice their Spanish.</p> <p class="ct-u-marginBottom30 ct-u-colorWhite">The rooms and bathrooms were clean. I was very happy and I will use your facilities again in the future.</p> <a href="#" class="btn btn-link ct-js-seeNext"><strong>See</strong> next<span><i class="icon-right-small"></i></span></a> </div> </div> <div class="ct-testimonials-image"> <div class="ct-mediaSection" data-height="650" data-background="../assets/images/demo-content/testimonial-bg-1.jpg"> <img src="../assets/images/demo-content/testimonials-person-1.png" class="animated" data-fx="fadeInRight" alt="Image"/> </div> </div> </div> </div> </div> </div> |
Description
Attribute data-background=”” – it allows you to set background as a picture or color (if you want to set the background color use data-background=”#color”)
example:
data-background=”../path/to/image/image-name” – for background image
data-background=”#000000″ – for background color (#000000 – hexadecimal equivalent of black color)
The main person image can be animated. If you want to do this, add to img class “animated” and in attribute data-fx=”” add the name of the animation – the list of available animation can be found here: https://daneden.github.io/animate.css/
JavaScript
<script src=”../assets/js/slick/js/slick.js”></script>
Screenshot
Testimonials