猫头鹰轮播自动播放在鼠标悬停时无法正常工作？

Question

我遇到了猫头鹰轮播“自动播放”功能的问题。我已经上传并包含了所有需要的文件。它在负载下正常工作。自动播放完美运行。但是当我将鼠标悬停在任何幻灯片上时，它会停止（并且我想在悬停时停止）。当我释放鼠标时，它不再播放。另外，当我在浏览器的不同选项卡之间切换并返回到打开轮播的选项卡时，它也会在该点永久停止。我需要用鼠标点击或鼠标球拖动它，然后再播放。

无法弄清楚是什么问题。我已经咨询了官方“猫头鹰轮播”网站和这些线程以及线程 01、线程 02、线程 04。尝试并应用了这些线程中提供的所有解决方案。没有任何改变。

这是我的代码。

<section id="demos">
  <div class="row">
    <div class="large-12 columns">
      <div class="owl-carousel owl-theme">
        <div class="item">             
          <img src="carousel-03.png" alt="Owl Image">
          <h2>Logo Design</h2>
          <p>Our logo designs are unique enough to get you the trademark and compelling enough to help you get clients. Get a logo done by us and see for yourself.</p>
        </div>
        <div class="item">              
          <img src="carousel-05.png" alt="Owl Image">
          <h2>Stationery Design</h2>
          <p>We design business cards and stationery which Convey the professionalism and seriousness of your business to your customers.</p>
        </div>
        <div class="item">
          <img src="carousel-02.png" alt="Owl Image">
          <h2>Flyers &amp; Brochures</h2>
          <p>We design brochures which depict your services in an impressive way to both current and potential clientele.</p>
        </div>
        <div class="item">
          <img src="carousel-01.png" alt="Owl Image">
          <h2>Apps Design</h2>
          <p>We design Apps which depict your services in an impressive way to both current and potential clientele.</p>
        </div>
        <div class="item">              
          <img src="carousel-04.png" alt="Owl Image">
          <h2>Labels and Packaging</h2>
          <p>We design Labels and Packaging which depict your services in an impressive way to both current and potential clientele.</p>
        </div>
      </div>
    </div>
  </div>
</section>

这是我的Js

<script>
   $(document).ready(function() {
      var owl = $('.owl-carousel');
      owl.owlCarousel({
         loop: true,
         nav: false,
         navSpeed: 2000,
         slideSpeed : 2000,
         dots: false,
         dotsSpeed: 2000,
         lazyLoad: false,
         autoplay: true,
         autoplayHoverPause: true,
         autoplayTimeout: 5000,
         autoplaySpeed:  800,
         margin: 0,
         stagePadding: 0,
         freeDrag: false,
         mouseDrag: true,
         touchDrag: true,
         slideBy: 1,
         fallbackEasing: "linear",
         responsiveClass: true,
         navText: [ "previous", "next" ],
         responsive: {
            0: {
               items: 1,
               nav: false
            },
            600: {
               items: 2,
               nav: false
            },
            1000: {
               items: 3,
               nav: false,
               margin: 20
            }
          }
       });
       owl.on('mousewheel', '.owl-stage', function (e) {
         if (e.deltaY>0) {
            owl.trigger('next.owl');
         } else {
            owl.trigger('prev.owl');
         }
         e.preventDefault();
      });
   })
</script>

以下是包含的文件：

<link rel="stylesheet" href="css/owl.carousel.min.css">

<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.min.js"></script>

<script src="js/owl.autoplay.js"></script>
<script src="js/owl.autorefresh.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>

<script src="js/highlight.js"></script>
<script src="js/app.js"></script>

提前感谢您的帮助。

Answer 1

尽量不要在 owl carousel 的范围内找到解决方案，我们可以创建自己的类似函数

var block = false;
$(".owl-item").mouseenter(function(){
 if(!block) {
  block = true;
  owl.trigger('stop.owl.autoplay')
  block = false;
  }
});
$(".owl-item").mouseleave(function(){
 if(!block) {
  block = true;
  owl.trigger('play.owl.autoplay',[1000])
  block = false;
 }
});