Owl Carousel - Skips Past Images using Prev / Next

Question

Our custom Owl Carousel isn't behaving as expected - while dragging and using keyboard arrows takes you to the next slide, the previous and next arrows jump 'over' the next slide to the one after.

The next slide does appear briefly but quickly flicks to the following slide.

I've tried a few things in the main.js settings but no dice. Any thoughts would be greatly appreciated as I'm a bit stumped.

main.js code is:

$(document).ready(function() {

// initialise owl
  $(function() {
      var owl = $('.owl-carousel');
      owl.owlCarousel({
      items:1,
      lazyLoad:true,
      loop:true,
      useMouseWheel: false,
      nav: true,
      center: true,
      dots: false,
      margin: 0,
      stagePadding: 0,
      URLhashListener: true,
      startPosition: 'URLHash',
      animateIn: 'fadeIn',
      animateOut: 'fadeOut'
    });

    // click for next image
    $(owl).click(function() {
      owl.trigger('next.owl');
    })

      // add arrow keys to carousel navigation
      $(document).on('keydown', function( event ) { //attach event listener
        if(event.keyCode == 37) {
          owl.trigger('prev.owl')
        }
        if(event.keyCode == 39) {
          owl.trigger('next.owl')
          }
      });
      // end arrow keys



  }); // end owl


}); // end document ready

Happy to share any other parts of the code if it would be useful. Thanks in advance for any guidance!

Answer 1

With @Tiberiuscan pointing me in the right direction, I figured out a solution:

The click for next image part was targeting the entire owl carousel for clicks.

I modified this code to target the owl-item div and that resolved the issue, as below:

      // click for next image
  $('.owl-item').click(function() {
    owl.trigger('next.owl');
  })

Thanks again, @Tiberiuscan