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.


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


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


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

Examples

  1. Slider
    
    <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
    
    <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>