2

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

2

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.

0

I don't claim to be a WP expert (nor do I care to be), but I had the same issue trying to get Owl Carousel to work on a wordpress site for a client, and I have an ugly solution.

First of all as steamfunk pointed out, WordPress requires all jQuery to use jQuery rather than $.

My initialization would look something like this:

jQuery(function() {
    jQuery('.owl-carousel').owlCarousel()
})

I also was having issues figuring out how to enqueue my init script properly, so I decided to just put the script directly in the template I needed the carousel in.

You can still keep it in the footer, and just echo the script conditionally:

<?php if(is_page('name_of_page')): ?>
    <script>
        // Your init stuff
    </script>
<?php endif ?> 

Owl Carousel is the only plugin I've had issues doing things the "Wordpress way" so I guess it could be an issue with Owl Carousel. I don't know - again, not an expert.

However, my solution may not be elegant, but it worked for my situation and I couldn't find a good answer for this question, which is why I'm sharing this here.

2
  • 2
    You can just write jQuery(function($) { $('.owl-carousel').owlCarousel()});
    – fuxia
    Nov 5, 2016 at 19:39
  • Oh nice! I didn't think of that Dec 30, 2016 at 19:03
-1

you do not have to enqueue both the owl.carousel.js and the owl.carousel.min.js just the min will do. also wordpress requires you to put any jquery into a non conflict wrapper. this would go into the file owl.carousel-init.js since that is the one you have enqueued. from your example you have not enqueued the file "owl.carouselinit.js". please look below to see how the owl init code will look in a non conflict wrapper:

jQuery(document).ready(function ($) {

  $("#custom-carousel").owlCarousel({

    navigation: true, // Show next and prev buttons


    navigationText: [
      "<i class='fa fa-chevron-left icon-white'></i>",
      "<i class='fa fa-chevron-right icon-white'></i>"
    ],



    // pagination : false,
    //     paginationNumbers: false,

    slideSpeed: 300,
    paginationSpeed: 400,

    items: 3,
    itemsCustom: false,
    itemsDesktop: [1199, 3],
    itemsDesktopSmall: [980, 3],
    itemsTablet: [768, 3],
    itemsTabletSmall: true,
    itemsMobile: [415, 2],
    singleItem: false,
    itemsScaleUp: false,



  });
 });

as you can see, owl carousel requires the id of the div and not the class. this is a class .owl-carousel and this would be an id #owl-carousel. From what i understand owl carousel requires you to use a custom id name like #custom-carousel which can be found in the code above. Hope that helps CHEERS!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.