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

<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 –>

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

//Init the carousel  
$("#testimonials").owlCarousel({  
 slideSpeed: 500,  
 paginationSpeed: 500,  
 singleItem: true,  
 pagination : true,  
 transitionStyle : "backSlide"  
});  

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