OwlCarousel stopOnHover 函数

Question

我需要你的帮助一次，猫头鹰旋转木马最古老的版本。目前我需要设置一个 stopOnHover 功能。当您将鼠标悬停在它停止的滑块上时，会出现原始选项。我在滑块中有一个按钮，需要修改功能以仅在将鼠标悬停在按钮上时停止滑块。

这是我的配置。

    $(document).ready(function() {
      $(".owl-carousel").owlCarousel({
        loop:false,
        navigation : true,
        pagination : true,
        paginationSpeed : 1000,
        singleItem: true,
        transitionStyle: "mask",
        autoHeight: true,
        autoPlay: 6000, //Set AutoPlay to 3 seconds
        navigationText : false,
        stopOnHover: true,
        afterAction: syncPosition,
        afterInit: function(){
        $("#sequence-1").find('video').get(0).play();
}

      });


    function syncPosition(el){
    var current = this.currentItem;      
    // code for smooth transition
  this.owl.owlItems.removeClass('turn-on');
  var t = this;     

    $(this.owl.owlItems[this.owl.currentItem]).addClass('turn-on');
  }


    });


    $(window).scroll(function(){
      if ($(this).scrollTop() > 80) {
          $('.owl-pagination').addClass('hidden');
      } else {
          $('.owl-pagination').removeClass('hidden');
      }
});

感谢您的帮助

编辑： 我在作者的网站上找到了一个函数（方法）owl.stop()。 尝试使用鼠标悬停但不起作用。

    $(".slider_button").on("mouseover", function (){
    owl.stop() 
    });

Answer 1

在轮播选项中：

autoplay: true,
autoplayTimeout: 500,
autoplayHoverPause: true

$(window).load(function () {
  $('.owl-carousel').owlCarousel({
    autoWidth: true,
    center: true,
    items: 3,
    loop: true,
    margin: 10,
    autoplay: true,
    autoplayTimeout: 500,
    autoplayHoverPause: true
  });
});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script>
<link href="//cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="//cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css" rel="stylesheet"/>

<div class="owl-carousel owl-theme">
  <div class="item">
    <img src="http://placehold.it/350x150&text=1" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150&text=2" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150&text=3" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150&text=4" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150&text=5" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150&text=6" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150&text=7" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150&text=8" />
  </div>
</div>