title: Owl Carousel - Skips Past Images using Prev / Next
body: <p>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.</p>
  
  <p>The next slide does appear briefly but quickly flicks to the following slide.</p>
  
  <p>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.</p>
  
  <p>main.js code is:</p>
  
  <pre><code>$(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
  </code></pre>
  
  <p>Happy to share any other parts of the code if it would be useful. Thanks in advance for any guidance!</p>