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.

Was this article helpful to you? Yes No

How can we help?