1. Home
  2. Docs
  3. Eden
  4. How to Change Testimonial Slider Content

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?