Question: Integrating Owl Carousel with WordPress’s Native jQuery Dependency

View responses here: https://github.com/OwlCarousel2/OwlCarousel2/issues/2964

My Question:

How can I integrate Owl Carousel in WordPress in a way that ensures:

1. It depends on WordPress’s built-in jQuery, avoiding external jQuery loading.
2. It functions properly without breaking other WordPress functionality?

Any suggestions or best practices for using Owl Carousel with WordPress while adhering to WordPress’s jQuery dependency would be greatly appreciated!

I had to initialize jQuery on my ow-carousel.js file:

jQuery(document).ready(function($) {
    $('.owl-carousel').owlCarousel({
        loop: true,
        margin: 10,
        nav: true,
        items: 1
    });
});

A summary of the issue and the browser/OS environment in which it occurs.

I am having issues integrating jQuery with the Owl Carousel plugin in WordPress without causing conflicts. When jQuery is loaded twice (once by WordPress and once externally), it creates issues with WordPress core functionality, such as WooCommerce settings buttons being grayed out. However, when I try to make Owl Carousel dependent on WordPress’s built-in jQuery, the carousel does not function properly.

Environment:

• WordPress version: 6.7.1
• Owl Carousel version: 2.3.4
• Browser: Chrome / Firefox / Safari
• OS: macOS X

Steps required to reproduce the bug

1.) Enqueue the Owl Carousel scripts in functions.php as follows (this works, but loads jQuery twice, causing conflicts):

wp_enqueue_script('jquery-min', get_theme_file_uri('/owl-carousel/jquery.min.js'));
wp_enqueue_script('owl-carousel', get_theme_file_uri('/owl-carousel/owl.carousel.min.js'));
wp_enqueue_script('owl-carousel-custom', get_theme_file_uri('/owl-carousel/owl-carousels.js'));

2.) Visit a WordPress page where a WooCommerce setting or other WordPress core functionality is available (e.g., admin WooCommerce settings).
3.) Observe conflicts (e.g., buttons grayed out).
4.) Attempt to enqueue Owl Carousel so it uses WordPress’s native jQuery instead of loading jQuery externally:

wp_enqueue_script('owl-carousel', get_theme_file_uri('/owl-carousel/owl.carousel.min.js'), ['jquery']);
wp_enqueue_script('owl-carousel-custom', get_theme_file_uri('/owl-carousel/owl-carousels.js'), ['owl-carousel']);

5.) Visit a page using the Owl Carousel functionality and notice that the carousel does not work correctly.

---

<url> – a link to the reduced test case.

Website where jQuery is loaded twice but causes WordPress conflicts:
https://discoveryengineering.net/
Loom Video Overview

Website where Owl Carousel attempts to rely on WordPress’s native jQuery but fails to function:
https://stitchitquick.com/

---

Additional information

Here are the main lines of code used for each scenario:

Scenario 1: External jQuery causing conflicts

wp_enqueue_script('jquery-min', get_theme_file_uri('/owl-carousel/jquery.min.js'));
wp_enqueue_script('owl-carousel', get_theme_file_uri('/owl-carousel/owl.carousel.min.js'));
wp_enqueue_script('owl-carousel-custom', get_theme_file_uri('/owl-carousel/owl-carousels.js'));

Scenario 2: Depending on WordPress jQuery, but Owl Carousel breaks

wp_enqueue_script('owl-carousel', get_theme_file_uri('/owl-carousel/owl.carousel.min.js'), ['jquery']);
wp_enqueue_script('owl-carousel-custom', get_theme_file_uri('/owl-carousel/owl-carousels.js'), ['owl-carousel']);