Owl Carousel Docs

Add to favorites

Documentation can be found here
Owl Carousel https://owlcarousel2.github.io/OwlCarousel2/

Add font awesome as well because font awesome is awesome.

wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.2.0/css/all.css'); 

It get’s used in this project 😉

Lib CDN’s can be found here
CDN’s https://cdnjs.com/libraries/OwlCarousel2
Scripts and Styles for “wp-enqueu”

// Version 1.3.3
wp_enqueue_style('owl-carousel-min-css','https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css'); 
wp_enqueue_style('owl-theme-min-css','https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css'); 
wp_enqueue_script('owl-carousel-script-lib','https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js');

// Version 2.0.0-beta
wp_enqueue_style('owl-carousel-min-css','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css');
wp_enqueue_style('owl-theme-min-css','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css');
wp_enqueue_script('owl-carousel-script-lib','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js');

The library is also inside the Libs folder on the server if you need it. Or you can just download it from the first link above.

<div class="owl-carousel owl-theme" id="about-banner">
    <div class="item">
        <div class="inner-block">
            <div class="icon"> <i class="fas fa-cogs"></i> </div>
            <div class="inner-block-header">
                <h2>Quality Service</h2> </div>
            <div class="inner-block-text">
                <p>The best paragraph</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="inner-block">
            <div class="icon"> <i class="fas fa-cogs"></i> </div>
            <div class="inner-block-header">
                <h2>Quality Service</h2> </div>
            <div class="inner-block-text">
                <p>The best paragraph</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="inner-block">
            <div class="icon"> <i class="fas fa-cogs"></i> </div>
            <div class="inner-block-header">
                <h2>Quality Service</h2> </div>
            <div class="inner-block-text">
                <p>The best paragraph</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="inner-block">
            <div class="icon"> <i class="fas fa-cogs"></i> </div>
            <div class="inner-block-header">
                <h2>Quality Service</h2> </div>
            <div class="inner-block-text">
                <p>The best paragraph</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="inner-block">
            <div class="icon"> <i class="fas fa-cogs"></i> </div>
            <div class="inner-block-header">
                <h2>Quality Service</h2> </div>
            <div class="inner-block-text">
                <p>The best paragraph</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="inner-block">
            <div class="icon"> <i class="fas fa-cogs"></i> </div>
            <div class="inner-block-header">
                <h2>Quality Service</h2> </div>
            <div class="inner-block-text">
                <p>The best paragraph</p>
            </div>
        </div>
    </div>
</div>

.inner-block .icon {
     color: #f44336;
     text-align: center;
     padding: 10px;
     font-size: 70px;
}
 .inner-block-header {
     text-align: center;
}
 .inner-block-text {
     text-align: center;
}
 #about-banner .inner-block {
     margin: 35px;
     border-top: 1px solid #f44336;
     border-bottom: 1px solid #f44336;
}
#about-banner {
     margin: 25px;
}

$("#about-banner").owlCarousel({
    items: 3,
    itemsDesktop: [1000, 2],
    itemsDesktopSmall: [980, 1],
    itemsTablet: [768, 1],
    pagination: true,
    navigation: false,
    navigationText: ["", ""],
    autoPlay: true
})