How to connect OWL Carousel to Wordpress?

Question

JavaScript

Hello colleagues!

The second day I'm struggling with the OWL Carousel , namely: I can't connect it so that it works.

To be more precise, the carousel itself works. Carousel items are click-and-drag, just like in the original. The problem is navigation, which does not want to work in any way.

What I'm doing now:
1. Include jquery in functions.php

function jquery_init() {
    if (!is_admin()) {
        wp_enqueue_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'jquery_init');

2. I connect the OWL Carousel plugin itself in functions.php

function natige_scripts() {

  
  wp_enqueue_script('history-carousel', get_template_directory_uri() . '/js/owl.carousel.js', array('jquery'), '1.0', true);

}
add_action( 'wp_enqueue_scripts', 'natige_scripts', 10, 1 );

3. I initialize the plugin in header.php

<script>
    jQuery(document).ready(function($) {
     
    var owl = $("#owl-demo");
     
    owl.owlCarousel({
    items : 4, //10 items above 1000px browser width
    itemsDesktop : [1000,5], //5 items between 1000px and 901px
    itemsDesktopSmall : [900,3], // betweem 900px and 601px
    itemsTablet: [600,2], //2 items between 600 and 0
    itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
    });
     
    // Custom Navigation Events
    $(".next").click(function(){
    owl.trigger('owl.next');
    })
    $(".prev").click(function(){
    owl.trigger('owl.prev');
    })
    $(".play").click(function(){
    owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
    })
    $(".stop").click(function(){
    owl.trigger('owl.stop');
    })
     
    });
</script>

I suspect that the error lies in the initialization, but I'm not a programmer, unfortunately.

Please tell me the correct initialization code. Thanks to!

Answer 1

It was necessary to immediately open Firebug and see the errors. It turns out that the dropdown menu script was in conflict with the carousel script.
Corrected and now it remains to achieve the desired picture.

Answer 2

um... I'm a little confused by your jQuery connection . Unfortunately, I'm not a programmer, but a sys. admin, but isn't it done like this:

$(document).ready(function() {
 
  var owl = $("#owl-demo");
 
  owl.owlCarousel({

not?

Answer 3

The method you suggested connects to html, not to wordpress. Read the relevant article in the code

Answer 4

the only thing I can advise you is to try to replace the jQuery connection with Google's one, there it is still given gzip + caching is better