Owl 轮播自动播放无法正常工作？

Question

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

无法弄清楚问题出在哪里。我已经查阅了官方 "Owl carousel" 网站和这些主题 Thread 01, Thread 02, Thread 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

默认情况下无法作为选项提供，因此您需要制作自己的函数

在开头声明一个变量

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;
 }
});

希望这是您问题的答案！

Owl 轮播自动播放无法正常工作？

Owl carousel Auto Play not working properly?

html

jquery

slider

carousel

owl-carousel