1. Home
  2. Docs
  3. Airspace
  4. Owl Carousel Sliders

Owl Carousel Sliders

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

[code language=”html”]
<div id="testimonial-slider" class="owl-carousel">
<div>
<img src="img/cotation.png" alt="IMG">
<p>"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">
<img src="img/item-img1.jpg" alt="Pepole">
<p><span>Rose Ray</span> CEO-Themefisher</p>
</div>
</div>
<div>
<img src="img/cotation.png" alt="IMG">
<p>"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">
<img src="img/item-img1.jpg" alt="Pepole">
<p><span>Rose Ray</span> CEO-Themefisher</p>
</div>
</div>
<div>
<img src="img/cotation.png" alt="IMG">
<p>"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">
<img src="img/item-img1.jpg" alt="Pepole">
<p><span>Rose Ray</span> CEO-Themefisher</p>
</div>
</div>
<div>
<img src="img/cotation.png" alt="IMG">
<p>"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">
<img src="img/item-img1.jpg" alt="Pepole">
<p><span>Rose Ray</span> CEO-Themefisher</p>
</div>
</div>
</div>
[/code]

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)

[code class=”javascript”]
$("#testimonial-slider").owlCarousel({
paginationSpeed : 500,
singleItem:true,
autoPlay: 3000,
});
[/code]

under the curly brace apply your slider settings. For more about owl carousel follow this link.

Was this article helpful to you? Yes No

How can we help?