Testimonials

This feature consists of two containers: one for the image and another for the header and rich text area (paragraph by default). There is a numbered pager and left and right arrows generated by JavaScript to navigate through the testimonials.

For a complete list of best practices, visit the main portlet page: Features

HTML Structure


<div class="featureWrapper testimonials">
          <div class="carousel">
		  		<div class="feature clearfix">
                <div class="wrapper">
                  <h2>Feature Title</h2>
                		<div class="image">
                			<span>
					        <img src="theme/testimonials/testimonial1.jpg" alt="" />
				            </span>
                		</div>
                 		<div class="text">
					    <!-- Rich text. This is the ONLY area where text elements may be added/edited. --> 
                            <p>Feature content</p>
					   <!-- End rich text -->
                        </div>
                </div>
              </div><!-- End feature -->
			<!-- Copy/paste div.feature and contents for more features of the same type --> 
          </div>
        </div><!-- End featureWrapper -->
      
<!-- The following are part of the render template therefore cannot be altered. Include these files in the <head> OR at the bottom just before </body>) -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js">//</script> 
    
<script>
    $('.testimonials .carousel').slick({
		cssEase: 'linear',
		infinite: true,
       slidesToShow: 3,
       slidesToScroll: 3,
		speed: 500,
		dots: true,
		arrows: true,
		appendArrows: $("<div></div>").addClass("controls").insertAfter(".testimonials .carousel"),
		accessibility: true,
		
		responsive: [
			{
			  breakpoint: 990,
			  settings: {
			  slidesToShow: 2,
			  slidesToScroll: 2,
			  }
			},
			{
			  breakpoint: 600,
			  settings: {
			  slidesToShow: 1,
			  slidesToScroll: 1
			  }
			}
		]
	});  
</script>

Default Styling

Patient A.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod at magna dapibus aliquam. Phasellus ac congue velit."

Patient B.

"Vivamus euismod at magna dapibus aliquam. Phasellus ac congue velit."

Patient C.

"Suspendisse ligula ante, luctus sit amet volutpat lobortis, consequat ac metus."

Patient D.

"Consectetur adipiscing elit. Vivamus euismod at magna dapibus aliquam. Phasellus ac congue velit."

Patient E.

"Vivamus euismod at magna dapibus aliquam. Phasellus ac congue velit."

Patient F.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod at magna dapibus aliquam. Phasellus ac congue velit."

Custom Styling Example

Patient A.

Donec aliquam bibendum erat a vestibulum. Nam molestie tincidunt massa et vehicula. Etiam vel massa magna.

12 January 2017

Patient B.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget laoreet lorem, vitae commodo lorem.

12 January 2017

Patient C.

Quisque non semper erat, in sagittis justo. Etiam vestibulum enim at metus elementum auctor. Proin faucibus egestas laoreet. Etiam quis efficitur nulla, at congue dui.

12 January 2017

Patient D.

Donec aliquam bibendum erat a vestibulum. Nam molestie tincidunt massa et vehicula. Etiam vel massa magna.

12 January 2017

Patient E.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget laoreet lorem, vitae commodo lorem.

12 January 2017

Patient F.

Quisque non semper erat, in sagittis justo. Etiam vestibulum enim at metus elementum auctor. Proin faucibus egestas laoreet. Etiam quis efficitur nulla, at congue dui.

12 January 2017

Patient G.

Donec aliquam bibendum erat a vestibulum. Nam molestie tincidunt massa et vehicula. Etiam vel massa magna.

12 January 2017

Patient H.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget laoreet lorem, vitae commodo lorem.

12 January 2017

Patient I.

Quisque non semper erat, in sagittis justo. Etiam vestibulum enim at metus elementum auctor. Proin faucibus egestas laoreet. Etiam quis efficitur nulla, at congue dui.

12 January 2017

Custom Styling Example

Patient A.

Donec aliquam bibendum erat a vestibulum. Nam molestie tincidunt massa et vehicula. Etiam vel massa magna.

Patient B.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget laoreet lorem, vitae commodo lorem.

Patient C.

Quisque non semper erat, in sagittis justo. Etiam vestibulum enim at metus elementum auctor. Proin faucibus egestas laoreet. Etiam quis efficitur nulla, at congue dui.

Patient D.

Donec aliquam bibendum erat a vestibulum. Nam molestie tincidunt massa et vehicula. Etiam vel massa magna.

Patient E.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget laoreet lorem, vitae commodo lorem.

Patient F.

Quisque non semper erat, in sagittis justo. Etiam vestibulum enim at metus elementum auctor. Proin faucibus egestas laoreet. Etiam quis efficitur nulla, at congue dui.

Patient G.

Donec aliquam bibendum erat a vestibulum. Nam molestie tincidunt massa et vehicula. Etiam vel massa magna.

Patient H.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget laoreet lorem, vitae commodo lorem.

Patient I.

Quisque non semper erat, in sagittis justo. Etiam vestibulum enim at metus elementum auctor. Proin faucibus egestas laoreet. Etiam quis efficitur nulla, at congue dui.