How to integrate owl carousel into theme without using a plugin?

by

You’re reusing handles for the script and the styles. These need to be unique values (see WP Codex Reference)

It should look something like this:

wp_enqueue_script( 'owlcarousel', get_template_directory_uri() . '/inc/owl/owl.carousel.min.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'owlcarousel-init', get_template_directory_uri() . '/inc/owl/owl.carousel-init.js', array( 'jquery' ), false, true );
wp_enqueue_style( 'owlcarousel-style', get_template_directory_uri() . '/inc/owl/owl.carousel.css' );
wp_enqueue_style( 'owlcarousel-theme', get_template_directory_uri() . '/inc/owl/owl.theme.css' );
wp_enqueue_style( 'owlcarousel-transitions', get_template_directory_uri() . '/inc/owl/owl.transitions.css' );

You do not need to enqueue both owl.carousel.js and the .min.js. Functionally these two files should be identical. The .js version is the full code that you would want to use in a development environment and the .min.js is a minimized version of the code optimized for smaller file size and is used in production environment.

Leave a Comment