首页 文章

如何在单击导航箭头时停止猫头鹰轮播

提问于
浏览 次
0

我有一个简单的猫头鹰旋转木马，带有自动播放设置和导航箭头，定义如下：

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元素 . 它不是很优雅，但它可以达到目的） .

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

任何关于如何解决这个问题的提示都非常感谢 . 谢谢！

javascript jquery owl-carousel

3 回答

  • 1

    从我收集的here和here看来它是一个计时器问题：触发 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');
});

    编辑：第二个解决方案似乎工作：https://jsfiddle.net/b6x6vc8q/3/

    回复于
  • 3

    为了阻止猫头鹰自动播放你可以触发相应的事件：

    stop.owl.autoplay：停止自动播放 .

    而：

    play.owl.autoplay：运行自动播放

    片段：

    $('.owl-carousel').owlCarousel({
    animateOut: 'fadeOut',
    autoplay: true,
    autoplayHoverPause: false,
    autoplaySpeed: 10,
    dots: false,
    lazyLoad: true,
    loop: true,
    mouseDrag: false,
    pullDrag: false,
    touchDrag: false,
    nav: true,
    navText: [
        "‹",
        "›"
    ]
});
$('#btn1').on('click', function(e) {
    $('.owl-carousel').trigger('stop.owl.autoplay');
})
$('#btn2').on('click', function(e) {
    $('.owl-carousel').trigger('play.owl.autoplay');
})

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>


<div class="owl-carousel owl-theme">
    <div><img src="https://dummyimage.com/300x200/000/fff&text=1"></div>
    <div><img src="https://dummyimage.com/300x200/000/fff&text=2"></div>
    <div><img src="https://dummyimage.com/300x200/000/fff&text=3"></div>
    <div><img src="https://dummyimage.com/300x200/000/fff&text=4"></div>
    <div><img src="https://dummyimage.com/300x200/000/fff&text=5"></div>
    <div><img src="https://dummyimage.com/300x200/000/fff&text=6"></div>
    <div><img src="https://dummyimage.com/300x200/000/fff&text=7"></div>
</div>
<button type="button" id="btn1">Stop owlCarousel</button>
<button type="button" id="btn2">Start owlCarousel</button>
    回复于
  • 0

    示例：

    Codepen

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

    CSS：

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

    JS：

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

  });

});
    回复于

相关问题