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

by

I’ve been trying to integrate the owl.carousel into my theme but can’t get it to work. The instructions on the page are not for WordPress so I need help with how to properly enqueue the required files and calling (initializing) the carousel.

I have added the following files to my themes directory located at MyTheme/inc/owl/

  • AjaxLoader.gif
  • grabbing.png
  • owl.carousel.css
  • owl.carousel.js
  • owl.carousel.min.js
  • owl.carouselinit.js -> This is the “call the Owl initializer function”
  • owl.theme.css
  • owl.transitions.css

In my functions.php file I enqueue the required files:

/*-------------------------------------------------------------------------------
Add Owl Carousel
-------------------------------------------------------------------------------*/

// Enqueue Scripts/Styles for our owl.carousel.2
function agencyclix_add_owlcarousel() {
wp_enqueue_script ( 'jquery' );
wp_enqueue_script( 'owlcarousel', get_template_directory_uri() . '/inc/owl/owl.carousel.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'owlcarousel', get_template_directory_uri() . '/inc/owl/owl.carousel.min.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'owl-carousel', 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-style', get_template_directory_uri() . '/inc/owl/owl.theme.css' );
wp_enqueue_style( 'owlcarousel-style', get_template_directory_uri() . '/inc/owl/owl.transitions.css' );
}
add_action( 'wp_enqueue_scripts', 'agencyclix_add_owlcarousel' );

In the file “owl.carouselinit.js” I simply added the initializer function listed at the website which is:

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

Also I have looked at some plugins that use owl carousel and it looks like they are only using (enqueue) 3 files to use the owl carousel.

Thanks in advanced

3 Answers
3

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