How to Change Testimonial Slider Content

We have used Slick slider in testimonial section. The basic structure of Slick Sloder is given below

1. HTML markup setup

<div class="testimonial-carousel p-4">
<div>
<i class="ion-quote text-color mb-3 d-block"></i>
<p class="mb-4">"This Company created an e-commerce site with the tools to make our business a success, with innovative ideas we feel that our site has unique elements that make us stand out from the crowd."</p>
<div class="user d-flex">
<img src="images/avater.jpg" alt="" class="img-fluid rounded-circle mr-3">
<p class="pb-0 mt-2">Rose Ray <span class="d-block">CEO-Themefisher</span></p>
</div>
</div>

<div>
<i class="ion-quote text-color mb-3 d-block"></i>
<p class="mb-4">"This Company created an e-commerce site with the tools to make our business a success, with innovative ideas we feel that our site has unique elements that make us stand out from the crowd."</p>
<div class="user d-flex">
<img src="images/avater.jpg" alt="" class="img-fluid rounded-circle mr-3">
<p class="pb-0 mt-2">Rose Ray <span class="d-block">CEO-Themefisher</span></p>
</div>
</div>

<div>
<i class="ion-quote text-color mb-3 d-block"></i>
<p class="mb-4">"This Company created an e-commerce site with the tools to make our business a success, with innovative ideas we feel that our site has unique elements that make us stand out from the crowd."</p>
<div class="user d-flex">
<img src="images/avater.jpg" alt="" class="img-fluid rounded-circle mr-3">
<p class="pb-0 mt-2">Rose Ray <span class="d-block">CEO-Themefisher</span></p>
</div>
</div>

<div>
<i class="ion-quote text-color mb-3 d-block"></i>
<p class="mb-4">"This Company created an e-commerce site with the tools to make our business a success, with innovative ideas we feel that our site has unique elements that make us stand out from the crowd."</p>
<div class="user d-flex">
<img src="images/avater.jpg" alt="" class="img-fluid rounded-circle mr-3">
<p class="pb-0 mt-2">Rose Ray <span class="d-block">CEO-Themefisher</span></p>
</div>
</div>
</div>

*Change contents form div.

Add the class or id name of the div you want to apply the slider of owl carousel in script.js file like below (*We have the id works of the div)

2. jQuery initialization

       $('.testimonial-carousel').slick({
		slidesToShow: 1,
		infinite: true,
		arrows: false,
		autoplay: true,
		autoplaySpeed: 2000
	});

under the curly brace apply your slider settings. For more about Slick carousel follow this Link.

Was this article helpful to you? Yes No

How can we help?