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

Testimonial Slider

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

1. HTML markup setup

<div class="testimonial-block">
	<p>
	Maiores quasi placeat harum itaque, ducimus cumque quas expedita hic. Qui ullam iste provident mollitia expedita facilis fuga repellat.
	</p>

      <div class="client-info d-flex align-items-center">
		<div class="client-img">
		<img src="images/team/testimonial1.jpg" alt="" class="img-fluid">
		</div>
		<div class="info">
			<h6>John Partho</h6>
			<span>Newyork USA</span>
		</div>
	</div>
</div>

*Change contents form testimonial-block.

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: 4,
		slidesToScroll: 4,
		infinite: true,
		dots: false,
		arrows: false,
		autoplay: true,
		autoplaySpeed: 6000,
		responsive: [
		    {
		      breakpoint: 1024,
		      settings: {
		        slidesToShow: 4,
		        slidesToScroll: 4,
		        infinite: true,
		        dots: true
		      }
		    },
		    {
		      breakpoint: 900,
		      settings: {
		        slidesToShow: 2,
		        slidesToScroll: 2
		      }
		    },{
		      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?