Owl Carousel

Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

Plugin Documentation

Usage

JS

In order to use this plugin on your page you will need to include the following script in the page.

copy

<script src="assets/libs/owl-carousel/dist/js/owl.carousel.min.js"></script>

CSS

In order to use this plugin on your page you will need to include the following css in the page.

copy

<link rel="stylesheet" href="assets/libs/owl-carousel/dist/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/libs/owl-carousel/dist/css/owl.theme.default.min.css">

Initialization

Add the below init function before the closing </body> tag, to enable it.

copy

<script>
    $(document).ready(function() {
        $(".owl-carousel").owlCarousel();
    });
</script>

Examples

  1. Slider

    Intelligent Staffs

    Best Office Space

    Wellbeing At Work

    copy
    
<div class="classic-slider owl-carousel owl-theme w-100">
    <div class="item w-100 h-300 h-lg-400 h-xl-500 bg-cover" style="background-image: url(assets/img/banner/slide-04.jpg);">
        <h3 class="d-inline-block mt-6 ml-6 bg-white py-2 px-3 mb-0 font-weight-lighter">
            Intelligent Staffs
        </h3>
    </div>
    <div class="item w-100 h-300 h-lg-400 h-xl-500 bg-cover" style="background-image: url(assets/img/banner/slide-05.jpg);">
        <h3 class="d-inline-block mt-6 ml-6 bg-white py-2 px-3 mb-0 font-weight-lighter">
            Best Office Space 
        </h3>
    </div>
    <div class="item w-100 h-300 h-lg-400 h-xl-500 bg-cover" style="background-image: url(assets/img/banner/slide-06.jpg);">
        <h3 class="d-inline-block mt-6 ml-6 bg-white py-2 px-3 mb-0 font-weight-lighter">
            Wellbeing At Work
        </h3>
    </div>
</div>
  2. Testimonial

    Wow! It's an amazing what a theme, I've never seen this type of work before. I'd recommend to buy this theme which want to create amazing website.

    ...

    William Warfield

    Commercial officer

    Cavistar used for numerous projects ranging from small business websites to large. Template documentation is amazing and well formatted as well.

    ...

    Ericka Dash

    Athletic Director

    It is so flexible and completely customization. I can deliver great quality designs in time. This template is very rich on features and flexible design options.

    ...

    James Conrad

    Instructional Specialist
    copy
    
<div class="row justify-content-center text-center">
    <div class="col-11 col-md-8 col-lg-8">

        <svg width="46px" height="46px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.8 23.9">
            <path class="fill-primary" d="M661.6,3170.6c.3,0,.5.1.5.3s-1.3,1.3-2.8,2.6-3.7,4.1-3.7,6.8,3.8,5.3,3.8,9-2,5.1-5,5.1-5.7-1.8-5.7-7.3C648.7,3177.9,659,3170.6,661.6,3170.6Zm8,2.5a.4.4,0,0,1,.5.5c0,1.1-3,2.6-3,5.9s4.4,4.2,4.4,7.6a4.2,4.2,0,0,1-4.2,4.2c-3.2,0-5.2-2.5-5.2-5.9C662.1,3178,668.1,3173.1,669.6,3173.1Z" transform="translate(-648.7 -3170.6)"></path>
        </svg>

        <!-- Testimonial -->
        <div class="testimonial owl-carousel owl-theme mt-5 mt-lg-8">

            <div class="item">

                <p class="display-7">Wow! It's an amazing what a theme, I've never seen this type of work before. I'd recommend to buy this theme which want to create amazing website.</p>

                <div class="d-flex align-items-center justify-content-center">
                    <div class="md-avatar">
                        <img class="img-fluid rounded-circle" src="assets/img/avatar/avatar-04.jpg" alt="...">
                    </div>
                    <div class="ml-3 text-left">
                        <h4 class="h5 mb-0">William Warfield</h4>
                        <small class="text-muted">Commercial officer</small>
                    </div>
                </div>

            </div>

            <div class="item">

                <p class="display-7">Cavistar used for numerous projects ranging from small business websites to large. Template documentation is amazing and well formatted as well.</p>

                <div class="d-flex align-items-center justify-content-center">
                    <div class="md-avatar">
                        <img class="img-fluid rounded-circle" src="assets/img/avatar/avatar-05.jpg" alt="...">
                    </div>
                    <div class="ml-3 text-left">
                        <h4 class="h5 mb-0">Ericka Dash</h4>
                        <small class="text-muted">Athletic Director</small>
                    </div>
                </div>

            </div>

            <div class="item">

                <p class="display-7">It is so flexible and completely customization. I can deliver great quality designs in time. This template is very rich on features and flexible design options.</p>

                <div class="d-flex align-items-center justify-content-center">
                    <div class="md-avatar">
                        <img class="img-fluid rounded-circle" src="assets/img/avatar/avatar-06.jpg" alt="...">
                    </div>
                    <div class="ml-3 text-left">
                        <h4 class="h5 mb-0">James Conrad</h4>
                        <small class="text-muted">Instructional Specialist</small>
                    </div>
                </div>

            </div>

        </div>
        <!-- End Testimonial -->

    </div>
</div>