The best way to adversize your company is to let your customers speak for you. And we have two types of this element! In {Theme} for Testimonials section we are using Slick slider. More information about this jQuery Slick plugin you will find in the documentation link down below.
— Slider
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div data-arrows="true" data-dots="true" class="ct-slick ct-js-slick ct-slick-dots-style2 ct-u-padding-bottom-40 ct-u-padding-top-40"> <div class="tablex item"> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="ct-testimonials ct-testimonials--dark"> <div class="ct-testimonials-inner"> <div class="ct-testimonials-image"><img src="assets/images/demo-content/testimonials.jpg" alt=""/></div> <div class="ct-testimonials-dsc"> <p>Nam a diam tincidunt, condimentum nisi et, fringilla lectus. Nullam nec lectus eu erat tempus pulvinar.</p> </div> <div class="ct-testimonials-client"><span class="ct-testimonials-name h4">jeffrey kendrick</span><span class="ct-testimonials-company h5">sales manager @ crisppi</span></div> </div> </div> </div> </div> </div> </div> </div> |
Screenshot
Testimonials – Slider
— Box
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="ct-testimonials ct-testimonials--block"> <div class="ct-testimonials-inner"> <div class="ct-item-label--circle"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="23px" height="17px" viewBox="0 0 23 17"> <text transform="translate(-25.00,10.00)" class="icon-svg"> <tspan y="42.60" x="16.88">“</tspan> </text> </svg> </div> <div class="ct-testimonials-dsc"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.</p> </div> <div class="ct-testimonials-client"><span class="ct-testimonials-name h4">jefrey kendrick</span><span class="ct-testimonials-company h5">sales manager @crisppi</span></div> </div> </div> |
Screenshot
Testimonials – Boxes
Slick Custom Tweaks
New Responsive data-attributes for ease of use:
- data-items-xl
- data-items-lg
- data-items-md
- data-items-sm
- data-items-xs
Slick Documentation can be found here. Files are bundled inside sella.min.js & style.css