Css styles:
.ct-testimonials–withBigImage
.ct-testimonials–inline
Testimonials with big image
Screenshot
Markup (ct-testimonials–withBigImage) – example for one item:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="ct-testimonials--withBigImage"><img src="assets/images/demo-content/testimonials-background.jpg" alt="testimonials"> <div class="ct-testimonials-slider"> <div data-adaptiveHeight="false" data-animations="true" data-autoplay="true" data-infinite="true" data-autoplaySpeed="3000" data-draggable="true" data-touchMove="false" data-arrows="false" data-XSitems="1" data-SMitems="2" data-MDitems="2" data-LGitems="3" data-items="1" class="ct-slick ct-js-slick ct-slick--arrowsTopBlue text-center"> <div class="item"> <div class="ct-slick-inner ct-u-marginBoth50"> <div class="ct-slick-content"> <div class="ct-personBox ct-personBox--titleTop"> <div class="ct-personBox-image"><img src="assets/images/demo-content/personBox-testimonials.jpg" alt="person"></div> <div class="ct-personBox-description"> <h5 class="ct-personBox-title">gabrielle memphis</h5> <p>My friends couldn't believe the price. The hotels were top of the line, and our guide was great. </p> </div> </div> </div> </div> </div> |
Testimonials – inline
Screenshot
Markup (ct-testimonials–inline) – example for one item:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div data-adaptiveHeight="true" data-animations="true" data-autoplay="true" data-infinite="true" data-autoplaySpeed="6000" data-draggable="true" data-touchMove="false" data-arrows="false" data-items="1" class="ct-slick ct-js-slick ct-u-marginBottom10"> <div class="item"> <div class="ct-slick-inner"> <div class="ct-slick-content"> <div class="ct-testimonials--inline"> <div class="ct-testimonials-image"><img src="assets/images/demo-content/testimonials2.jpg" alt="testimonials"></div> <div class="ct-testimonials-description"> “ My husband and I went on a 10-day Rome-Florence-Venice with Gate 1 Travel in this month and had an amazing time! ” </div> </div> </div> </div> </div> |
JavaScript
<script src=”../assets/js/slick/js/slick.js”></script>