Owl Carousel and WordPress Integration Via WP_Enqueue

Question

First, it is very important to enqueue your scripts in the proper order otherwise it will not work out.
And remember always enqueue your custom script at the very end of the queue.

You have not included last two parameters of the wp_enqueue_script() function as well. use true if you want to load it in the footer of the document and false otherwise.

 function loadup_scripts()
{
    wp_enqueue_script( 'respondjs', get_template_directory_uri() . 'js/respond.min.js', array( 'jquery' ), '', true );
    wp_enqueue_script( 'scriptjs', get_template_directory_uri() . 'js/script.js', array( 'jquery' ), '', true );
    wp_enqueue_script( 'owl-carousel', get_template_directory_uri() . 'js/owl.carousel.min.js', array( 'jquery' ), '', true );
    wp_enqueue_style( 'owl-style-min', get_stylesheet_directory_uri() . 'css/owl.carousel.min.css' );
    wp_enqueue_style( 'owl-style-def', get_stylesheet_directory_uri() . 'css/owl.theme.default.min.css' );
}

add_action( 'wp_enqueue_scripts', 'loadup_scripts' );

and you may use following code instead:

    <div class="container owl-carousel owl-theme">

            <div><img class="caro-item" src="https://wordpress.stackexchange.com/questions/290861/<?php bloginfo("template_directory'); ?>/img/slider-supplies.svg"/></div>
            <div><img class="caro-item" src="https://wordpress.stackexchange.com/questions/290861/<?php bloginfo("template_directory'); ?>/img/slider-storage.svg"/></div>
            <div><img class="caro-item" src="https://wordpress.stackexchange.com/questions/290861/<?php bloginfo("template_directory'); ?>/img/slider-security.svg"/></div>
            <div><img class="caro-item" src="https://wordpress.stackexchange.com/questions/290861/<?php bloginfo("template_directory'); ?>/img/slider-boxes.svg"/></div>
            <div><img class="caro-item" src="https://wordpress.stackexchange.com/questions/290861/<?php bloginfo("template_directory'); ?>/img/slider-computer-controlled-03.svg"/></div>
            <div><img class="caro-item" src="https://wordpress.stackexchange.com/questions/290861/<?php bloginfo("template_directory'); ?>/img/slider-flexible-terms-05.svg"/></div>
            <div><img class="caro-item" src="https://wordpress.stackexchange.com/questions/290861/<?php bloginfo("template_directory'); ?>/img/slider-insurance-06.svg"/></div>
            <div><img class="caro-item" src="https://wordpress.stackexchange.com/questions/290861/<?php bloginfo("template_directory'); ?>/img/slider-shipping.svg"/></div>
            <div><img class="caro-item" src="https://wordpress.stackexchange.com/questions/290861/<?php bloginfo("template_directory'); ?>/img/slider-units.svg"/></div>                         

</div>

Don’t forget to use browser’s console feature to figure out JavaScript errors.
I hope it helps.

Related Posts: