Owl carousel slider

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

1. HTML markup setup
[code language=”html”]
<div id="clients-slider" class="clients-logo-slider">
<img src="img/client-logo/logo1.png" alt="">
<img src="img/client-logo/logo-2.png" alt="">
<img src="img/client-logo/logo-3.png" alt="">
<img src="img/client-logo/logo-4.png" alt="">
<img src="img/client-logo/logo-5.png" alt="">
<img src="img/client-logo/logo1.png" alt="">
<img src="img/client-logo/logo-2.png" alt="">
<img src="img/client-logo/logo-3.png" alt="">
<img src="img/client-logo/logo-4.png" alt="">
<img src="img/client-logo/logo-5.png" alt="">
</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)

2. jQuery initialization
[code class=”javascript”]
$("#clients-slider").owlCarousel({
slideSpeed: 500,
paginationSpeed: 500,
pagination : false,
autoPlay: true,
});
[/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?