How to slide owl-carousel on next prev hover?

Question

I'm trying to slide the owl-carousel when I hover on next prev button. But I can't find a solution on it. Can someone help me?

Here is my Javascript code:

$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
   0: {
        items: 1,
        nav: true
      },
 600: {
        items: 1,
        nav: false
      },
 1000: {
        items: 3,
        nav: true,
        loop: false,
        margin: 20
      }
  }
  })
});
$('.owl-prev, .owl-next').on('hover', function(){
$(this).click();
});

Answer 1

What you are doing is initializing the owl carousel on page load. What you can do is, initialize it on hover like this:

 $('.owl-prev, .owl-next').on('hover', function(){ $('.owl-carousel').owlCarousel({ loop: true, margin: 10, responsiveClass: true, responsive: { 0: { items: 1, nav: true }, 600: { items: 1, nav: false }, 1000: { items: 3, nav: true, loop: false, margin: 20 } } }) });

Answer 2

$(document).ready(function() {
  var $owl = $('.owl-carousel');

  $owl.owlCarousel({
    loop: true,
    margin: 10,
    responsiveClass: true,
    responsive: {
      0: {
        items: 1,
        nav: true
      },
      600: {
        items: 1,
        nav: false
      },
      1000: {
        items: 3,
        nav: true,
        loop: false,
        margin: 20
      }
    }
  });

  $('.owl-prev').on('hover', function() {
    $owl.trigger('prev.owl.carousel', [300]);
  });
  $('.owl-next').on('hover', function() {
    $owl.trigger('next.owl.carousel', [300]);
  });
});

Maybe like this? Just with a quick look over the API. Hope it helps a bit. :)