Javascript 单击导航箭头时如何停止Owl转盘

我有一个简单的Owl转盘，带有自动播放设置和导航箭头，使用以下选项定义：

 var options = {
    mainBanner: {
        animateOut: 'fadeOut',
        autoplay: true,
        autoplayHoverPause: false,
        autoplaySpeed: 1200,
        dots: false,
        lazyLoad: true,
        loop: true,
        mouseDrag: false,
        pullDrag: false,
        touchDrag: false,
        nav: true,
        navText: [
            "‹",
            "›"
        ]
    },

当用户单击导航箭头时，我希望它停止自动播放。为此，我添加了以下函数：

setTimeout(function () {    
    $('.owl-nav > div').on('click', function () {
        $('.owl-carousel').trigger('stop.owl.autoplay');            
    })
}, 500);

（我添加了超时，因为在加载此函数时，.owl nav元素还没有呈现。它不是很优雅，但它可以达到这个目的）

问题是，当我单击导航箭头时，自动播放停止。但是，如果我再次单击它们（一次又一次），滑块将保持自动播放。这不是预期的行为-我只是希望它从第一次单击时停止

---

任何关于如何解决这个问题的提示都非常感谢。谢谢大家!

为了停止owl自动播放，您可以触发相应的事件：

：停止自动播放

而：

：运行自动播放

片段：

$（'.owl carousel'）.owlCarousel({
动画衰减：“衰减”，
自动播放：对，
自动播放暂停：false，
自动播放速度：10，
点：错，
懒汉：没错，
循环：对，
mouseDrag:错，
pullDrag:false，
触摸拖动：错误，
导航：是的，
导航文本：[
“&lsaqo；”，
“&rsaquo；”
]
});
$（'#btn1'）。在（'click'，函数（e）上{
$（'.owl carousel'）.trigger（'stop.owl.autoplay'）；
})
$（'#btn2'）。在（'click'，函数（e）上{
$（'.owl carousel'）.trigger（'play.owl.autoplay'）；
})

停止传送带
根据我收集的信息启动owlCarousel，这似乎是一个计时器问题：触发
stop.owl.autoplay
会破坏计时器，但不会更改自动播放设置，因此计时器会再次设置。您必须在设置中关闭（如果要重新激活，请重新打开）

您可以尝试：

$('.owl-nav > div').on('click', function () {
    $('.owl-carousel').trigger('stop.owl.autoplay');

    //simple one (EDIT: not enough to make it work after testing it):
    //$('.owl-carousel').trigger('changeOption.owl.carousel', { autoplay: false });

    //or more complicated (will work for one carousel only, or else use 'each'):
    //EDIT: this one seems to work
    var carousel = $('.owl-carousel').data('owl.carousel');
    carousel.settings.autoplay = false; //don't know if both are necessary
    carousel.options.autoplay = false;
    $('.owl-carousel').trigger('refresh.owl.carousel');
});

编辑：第二种解决方案似乎有效：
示例：


JS:

$（文档）.ready（函数（）{
var sync1=$（“#sync1”）；
var sync2=$（“#sync2”）；
var-slidespage=4；
var syncedSecondary=true；
sync1.1旋转木马({
项目：1，
幻灯片速度：2000，
导航：是的，
自动播放：对，
点：是的，
循环：对，
响应速度：200，
导航文本：[''，''，
}).on（'changed.owl.carousel'，syncPosition）；
同步2
.on（'initialized.owl.carousel'，函数（）{
sync2.find（“.owl项”）.eq（0）.addClass（“当前”）；
})
猫头鹰旋转木马({
项目：幻灯片页，
点：是的，
导航：是的，
智能速度：200，
幻灯片速度：500，
slideBy:slidespage，
回应率：100
}).on（'changed.owl.carousel'，syncPosition2）；
功能同步位置（el）{
var count=el.item.count-1；
var电流=数学四舍五入（el.item.index-（el.item.count/2）-.5）；
如果（电流<0）{
电流=计数；
}
如果（当前>计数）{
电流=0；
}
//端块
同步2
.find（“.owl项”）
.removeClass（“当前”）
.eq（电流）
.addClass（“当前”）；
屏幕上的var=sync2.find（'.owl item.active'）。长度-1；
var start=sync2.find（'.owl item.active'）.first（）.index（）；
var end=sync2.find（'.owl item.active'）.last（）.index（）；
如果（当前>结束）{
同步2.数据（'owl.carousel'）。到（当前，100，真）；
}
如果（电流<启动）{
同步2.数据（'owl.carousel'）。到（当前-屏幕上，100，真）；
}
}
功能同步位置2（el）{
如果（同步辅助）{
变量编号=el.item.index；
同步1.数据（'owl.carousel'）。到（数字，100，真）；
}
}
sync2.on（“click”、“.owl项”，函数（e）{
e、 预防默认值（）；
var number=$（this.index（）；
同步1.数据（'owl.carousel'）。到（数字，300，真）；
});
$（'.owl next'）。单击（函数（）{
$（'.owl carousel'）.trigger（'stop.owl.autoplay'）；
});
});
是否可以只记录您所有的点击，并且滑块继续向前移动，因为它会将它们排队？你确定它真的回到了自动播放模式吗？它在自动播放模式下启动。我点击一下。它停止（根据需要）。我第二次点击，现在它自动播放。。。从现在开始，无论我点击它一次、两次或根本不点击它，它都会继续播放…感谢您的回答和代码片段。不幸的是，它与我的代码有着相同的缺点：在我单击“停止”，然后单击箭头之后，滑块将继续自动播放。我希望它停止，甚至在我点击导航箭头之后。事实上，（只有）第二种解决方案工作得很好。非常感谢。
<div id="sync1" class="owl-carousel owl-theme">


<div class="item">
    <h1>1</h1></div>
  <div class="item">
    <h1>2</h1></div>
  <div class="item">
    <h1>3</h1></div>
  <div class="item">
    <h1>4</h1></div>
  <div class="item">
    <h1>5</h1></div>
  <div class="item">
    <h1>6</h1></div>
  <div class="item">
    <h1>7</h1></div>
  <div class="item">
    <h1>8</h1></div>
</div>

<div id="sync2" class="owl-carousel owl-theme">
  <div class="item">
    <h1>1</h1></div>
  <div class="item">
    <h1>2</h1></div>
  <div class="item">
    <h1>3</h1></div>
  <div class="item">
    <h1>4</h1></div>
  <div class="item">
    <h1>5</h1></div>
  <div class="item">
    <h1>6</h1></div>
  <div class="item">
    <h1>7</h1></div>
  <div class="item">
    <h1>8</h1></div>
</div>

#sync1 {


.item {
    background: gold;
    padding: 80px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
  }
}

#sync2 {
  .item {
    background: red;
    padding: 10px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    h1 {
      font-size: 18px;
    }
  }
  .current .item{
    background: gold;
  }
}



.owl-theme {
  .owl-nav {

    [class*='owl-'] {
      transition: all .3s ease;
      &.disabled:hover {
       background-color: gold;
      }   
    }

  }
}


#sync1.owl-theme {
  position: relative;
  .owl-next, .owl-prev {
    width: 22px;
    height: 40px;
    margin-top: -20px;
    position: absolute;
    top: 50%;
  }
  .owl-prev {
    left: 10px;
  }
  .owl-next {
    right: 10px;
  }
}

$(document).ready(function() {



var sync1 = $("#sync1");
  var sync2 = $("#sync2");
  var slidesPerPage = 4; 
  var syncedSecondary = true;

  sync1.owlCarousel({
    items : 1,
    slideSpeed : 2000,
    nav: true,
    autoplay: true,
    dots: true,
    loop: true,
    responsiveRefreshRate : 200,
    navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>','<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
  }).on('changed.owl.carousel', syncPosition);

  sync2
    .on('initialized.owl.carousel', function () {
      sync2.find(".owl-item").eq(0).addClass("current");
    })
    .owlCarousel({
    items : slidesPerPage,
    dots: true,
    nav: true,
    smartSpeed: 200,
    slideSpeed : 500,
    slideBy: slidesPerPage, 
    responsiveRefreshRate : 100
  }).on('changed.owl.carousel', syncPosition2);

  function syncPosition(el) {

    var count = el.item.count-1;
    var current = Math.round(el.item.index - (el.item.count/2) - .5);

    if(current < 0) {
      current = count;
    }
    if(current > count) {
      current = 0;
    }

    //end block

    sync2
      .find(".owl-item")
      .removeClass("current")
      .eq(current)
      .addClass("current");
    var onscreen = sync2.find('.owl-item.active').length - 1;
    var start = sync2.find('.owl-item.active').first().index();
    var end = sync2.find('.owl-item.active').last().index();

    if (current > end) {
      sync2.data('owl.carousel').to(current, 100, true);
    }
    if (current < start) {
      sync2.data('owl.carousel').to(current - onscreen, 100, true);
    }
  }

  function syncPosition2(el) {
    if(syncedSecondary) {
      var number = el.item.index;
      sync1.data('owl.carousel').to(number, 100, true);
    }
  }

  sync2.on("click", ".owl-item", function(e){
    e.preventDefault();
    var number = $(this).index();
    sync1.data('owl.carousel').to(number, 300, true);
  });

  $('.owl-next').click(function(){

    $('.owl-carousel').trigger('stop.owl.autoplay');

  });

});