Owl Carousel Sliders

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

1. HTML markup setup
[code language=”html”]
<div id="testimonials">

<!– testimonial single –>
<div class="item text-center">

<!– client photo –>
<div class="client-thumb">
<img src="img/team/client.jpg" class="img-responsive" alt="Meghna">
</div>
<!– /client photo –>

<!– client info –>
<div class="client-info">
<div class="client-meta">
<h3>Abul Mal Muhit</h3>
<span>Dec 26, 2014</span>
</div>
<div class="client-comment">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, ex, cupiditate, error, suscipit saepe sed ea consequuntur inventore sequi sit illo.</p>
<ul class="social-profile">
<li><a href="#"><i class="fa fa-facebook-square fa-lg"></i></a></li>
<li><a href="#"><i class="fa fa-twitter-square fa-lg"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin-square fa-lg"></i></a></li>
</ul>
</div>
</div>
<!– /client info –>
</div>
<!– /testimonial single –>

<!– testimonial single –>
<div class="item text-center">

<!– client photo –>
<div class="client-thumb">
<img src="img/team/client.jpg" class="img-responsive" alt="Meghna">
</div>
<!– /client photo –>

<!– client info –>
<div class="client-info">
<div class="client-meta">
<h3>Abul Mal Muhit</h3>
<span>Dec 26, 2014</span>
</div>
<div class="client-comment">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, ex, cupiditate, error, suscipit saepe sed ea consequuntur inventore sequi sit illo.</p>
<ul class="social-profile">
<li><a href="#"><i class="fa fa-facebook-square fa-lg"></i></a></li>
<li><a href="#"><i class="fa fa-twitter-square fa-lg"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin-square fa-lg"></i></a></li>
</ul>
</div>
</div>
<!– /client info –>
</div>
<!– /testimonial single –>

<!– testimonial single –>
<div class="item text-center">

<!– client photo –>
<div class="client-thumb">
<img src="img/team/client.jpg" class="img-responsive" alt="Meghna">
</div>
<!– /client photo –>

<!– client info –>
<div class="client-info">
<div class="client-meta">
<h3>Abul Mal Muhit</h3>
<span>Dec 26, 2014</span>
</div>
<div class="client-comment">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, ex, cupiditate, error, suscipit saepe sed ea consequuntur inventore sequi sit illo.</p>
<ul class="social-profile">
<li><a href="#"><i class="fa fa-facebook-square fa-lg"></i></a></li>
<li><a href="#"><i class="fa fa-twitter-square fa-lg"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin-square fa-lg"></i></a></li>
</ul>
</div>
</div>
<!– /client info –>
</div>
<!– /testimonial single –>

</div> <!– end testimonial wrapper –>
[/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”]
//Init the carousel
$("#testimonials").owlCarousel({
slideSpeed: 500,
paginationSpeed: 500,
singleItem: true,
pagination : true,
transitionStyle : "backSlide"
});
[/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?