javascript - How to stop Owl Carousel when clicking navigation arrows

I have a simple Owl carousel with autoplay set and navigation arrows, defined with the options below:

 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: [
            "&lsaquo;",
            "&rsaquo;"
        ]
    },

...

When the user clicks the navigation arrow, I want it to stop autoplay. In order to do this, I added the following function:

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

(I added the timeout because the .owl-nav elements are not rendered yet when this function is loaded. It's not quite elegant, but it serves the purpose).

The problem is that when I click the navigation arrows, the autoplay stops. BUT, if I click them again (and again, and again), the slider keeps autoplaying. This is not the expected behaviour - I would simply like it to stop from the first click.

Any hints on how to solve this are very much appreciated. Thank you!

I have a simple Owl carousel with autoplay set and navigation arrows, defined with the options below:

 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: [
            "&lsaquo;",
            "&rsaquo;"
        ]
    },

...

When the user clicks the navigation arrow, I want it to stop autoplay. In order to do this, I added the following function:

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

(I added the timeout because the .owl-nav elements are not rendered yet when this function is loaded. It's not quite elegant, but it serves the purpose).

Any hints on how to solve this are very much appreciated. Thank you!

Share Improve this question asked Aug 22, 2017 at 13:20 Diana 2872 gold badges7 silver badges18 bronze badges

can it be just that all your clicks are recorded and that the slider continues to go forth because it enqueues them? are you sure it is really back to autoplay mode? – Kaddath Commented Aug 22, 2017 at 13:26
1 It starts in autoplay mode. I click once. It stops (as required). I click second time, and now it autoplays... from this point on, no matter if I click it once, twice or don't click it at all, it keeps playing... – Diana Commented Aug 22, 2017 at 13:31

Add a comment |

4 Answers 4

Sorted by: Reset to default 10

In order to stop owl auto play you can trigger the corresponding event:

stop.owl.autoplay: Stops autoplay.

while:

play.owl.autoplay: Runs autoplay

The snippet:

$('.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: [
        "&lsaquo;",
        "&rsaquo;"
    ]
});
$('#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>

from what i gathered here and here it seems that it's a timer issue: triggering stop.owl.autoplay will destroy the timer, but not change the autoplay settings, so the timer is set again. You have to turn off (and back on if you want to re-activate) in the settings.

you can try:

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

EDIT: the second solution seems to be working: https://jsfiddle.net/b6x6vc8q/3/

Example :

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

  });

});

For me, Kaddath's answer worked, just changing the data like this:

var owlData = $('.owl-carousel').data('owlCarousel');
owlData.settings.autoplay = true;
owlData.options.autoplay = true;
$('.owl-carousel').trigger('refresh.owl.carousel');

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to stop Owl Carousel when clicking navigation arrows - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)