Implementing Owl Carousel on the front-page.php file for my site

Question

I am having a problem trying to get owl carousel working on the front page of my site.
https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html

function add_owlcarousel() {
    wp_enqueue_script ( 'jquery' );
    wp_enqueue_script( 'owlcarousel', get_template_directory_uri() . '/wp-content/themes/astra-child/OwlCarousel2-2.3.4/dist/owl.carousel.js', array( 'jquery' ), false, true );
    wp_enqueue_script( 'owlcarousel-init', get_template_directory_uri() . '/wp-content/themes/astra-child/OwlCarousel2-2.3.4/dist/owl.carouselinit.js', array( 'jquery' ), false, true );
    wp_enqueue_style( 'owlcarousel-style', get_template_directory_uri() . '/wp-content/themes/astra-child/OwlCarousel2-2.3.4/dist/assets/owl.carousel.css' );
    wp_enqueue_style( 'owlcarousel-theme', get_template_directory_uri() . '/wp-content/themes/astra-child/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.css' );
    //wp_enqueue_style( 'owlcarousel-transitions', get_template_directory_uri() . '/OwlCarousel2-2.3.4/dist/assets/owl.transitions.css' );
}
add_action( 'wp_enqueue_scripts', 'add_owlcarousel' );

This is what I currently have in my functions.php file. The owlcarousel-init looks like this

$(document).ready(function(){
    $('.owl-carousel').owlCarousel();
});

Right now I am just testing with the first demo carousel on the site and I am not getting any results.

My file structure is as follows:

  • astra-child

    • OwlCarousel2-2.3.4

      • dist

        • owl.carousel.js

        • owl.carouselinit.js

        • assets

          • owl.carousel.css
          • owl.carousel.default.css
0
Hunter Hammond 2 months 0 Answers 13 views 0

Leave an answer