1. Home
  2. Docs
  3. Enov
  4. Testimonial Slider

Testimonial Slider

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

1. HTML markup setup

<div class="testimonial-item position-relative">
       <i class="ti-quote-left text-color text-lg"></i>
	<p class="mt-4">Neque ipsa consequuntur excepturi quas repudiandae aliquam iste ab laboriosam id facere ducimus odio sed officia provident doloribus explicabo, magni, corrupti sit.</p>

	<div class="testimonial-author">
		<h5 class="mb-0 text-capitalize">Thomas Johnson</h5>
		<p>Excutive Director</p>
	</div>
</div>

*Change contents form testimonial-item.

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

2. jQuery initialization

$('.testimonial-wrap').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		infinite: true,
		dots: false,
		arrows: false,
		autoplay: true,
		autoplaySpeed: 6000,
		responsive: [
		    {
		      breakpoint: 1024,
		      settings: {
		        slidesToShow:1,
		        slidesToScroll: 1,
		        infinite: true,
		        dots: true
		      }
		    },
		    {
		      breakpoint: 900,
		      settings: {
		        slidesToShow: 1,
		        slidesToScroll: 1
		      }
		    },{
		      breakpoint: 600,
		      settings: {
		        slidesToShow: 1,
		        slidesToScroll: 1
		      }
		    },
		    {
		      breakpoint: 480,
		      settings: {
		        slidesToShow: 1,
		        slidesToScroll: 1
		      }
		    }
		  
  		]
	});
Was this article helpful to you? Yes No

How can we help?