Как вставить сову-карусель в следующий раз?

Question

Я пытаюсь сдвинуть сову-карусель при наведении курсора на кнопку next prev. Но я не могу найти решение по этому вопросу. Кто-нибудь может мне помочь?

Вот мой Javascript код:

$(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

Что вы делаете, это инициализация совы карусели при загрузке страницы. Что вы можете сделать, это инициализировать его при наведении, как это:

$('.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]);
  });
});

Может, вот так? Просто с кратким обзором API. Надеюсь, это поможет немного. :)