Пауза/Стоп Счетчик На последнем слайде

Question

У меня есть следующие строки кода на моем сайте:

HTML

<div class="qa"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>Last</div> 
</div> 

<p class="countdown-timer">00:01:00</p> 

JavaScript/JQuery

$(document).ready(function() { 
    $('.qa').slick({ 
    infinite: false, 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    adaptiveHeight: false, 
    arrows: true, 
    mobileFirst: true, 
    respondTo: 'window', 
    useCSS: true, 
    swipeToSlide: false 
    }); 
}); 

function Stopwatch(config) { 
    // If no config is passed, create an empty set 
    config = config || {}; 
    // Set the options (passed or default) 
    this.element = config.element || {}; 
    this.previousTime = config.previousTime || new Date().getTime(); 
    this.paused = config.paused && true; 
    this.elapsed = config.elapsed || 0; 
    this.countingUp = config.countingUp && true; 
    this.timeLimit = config.timeLimit || (this.countingUp ? 60 * 10 : 0); 
    this.updateRate = config.updateRate || 100; 
    this.onTimeUp = config.onTimeUp || function() { 
    this.stop(); 
    }; 
    this.onTimeUpdate = config.onTimeUpdate || function() { 
    console.log(this.elapsed) 
    }; 
    if (!this.paused) { 
    this.start(); 
    } 
} 

Stopwatch.prototype.start = function() { 
    // Unlock the timer 
    this.paused = false; 
    // Update the current time 
    this.previousTime = new Date().getTime(); 
    // Launch the counter 
    this.keepCounting(); 
}; 

Stopwatch.prototype.keepCounting = function() { 
    // Lock the timer if paused 
    if (this.paused) { 
    return true; 
    } 
    // Get the current time 
    var now = new Date().getTime(); 
    // Calculate the time difference from last check and add/substract it to 'elapsed' 
    var diff = (now - this.previousTime); 
    if (!this.countingUp) { 
    diff = -diff; 
    } 
    this.elapsed = this.elapsed + diff; 
    // Update the time 
    this.previousTime = now; 
    // Execute the callback for the update 
    this.onTimeUpdate(); 
    // If we hit the time limit, stop and execute the callback for time up 
    if ((this.elapsed >= this.timeLimit && this.countingUp) || (this.elapsed <= this.timeLimit && !this.countingUp)) { 
    this.stop(); 
    this.onTimeUp(); 
    return true; 
    } 
    // Execute that again in 'updateRate' milliseconds 
    var that = this; 
    setTimeout(function() { 
    that.keepCounting(); 
    }, this.updateRate); 
}; 

Stopwatch.prototype.stop = function() { 
    // Change the status 
    this.paused = true; 
}; 

$(document).ready(function() { 
    /* 
    * First example, producing 2 identical counters (counting down) 
    */ 
    $('.countdown-timer').each(function() { 
    var stopwatch = new Stopwatch({ 
     'element': $(this),    // DOM element 
     'paused': false,     // Status 
     'elapsed': 1000 * 60 * 1,   // Current time in milliseconds 
     'countingUp': false,    // Counting up or down 
     'timeLimit': 0,     // Time limit in milliseconds 
     'updateRate': 100,    // Update rate, in milliseconds 
     'onTimeUp': function() {   // onTimeUp callback 
      this.stop(); 
      $(this.element).html('Times Up'); 

      $(".qa").slick('slickGoTo', $('.qa div').length);  
     }, 
     'onTimeUpdate': function() {  // onTimeUpdate callback 
     var t = this.elapsed, 
      h = ('0' + Math.floor(t/3600000)).slice(-2), 
      m = ('0' + Math.floor(t % 3600000/60000)).slice(-2), 
      s = ('0' + Math.floor(t % 60000/1000)).slice(-2); 
     var formattedTime = h + ':' + m + ':' + s; 
     $(this.element).html(formattedTime); 
     } 
    }); 
    }); 
    /* 
    * Second example, producing 1 counter (counting up) 
    */ 
    var stopwatch = new Stopwatch({ 
    'element': $('.countup-timer'),  // DOM element 
    'paused': false,     // Status 
    'elapsed': 0,      // Current time in milliseconds 
    'countingUp': true,     // Counting up or down 
    'timeLimit': 1000 * 60 * 1,   // Time limit in milliseconds 
    'updateRate': 100,     // Update rate, in milliseconds 
    'onTimeUp': function() {   // onTimeUp callback 
     this.stop(); 
     $(this.element).html('Countdown finished!'); 
    }, 
    'onTimeUpdate': function() {  // onTimeUpdate callback 
     var t = this.elapsed, 
      h = ('0' + Math.floor(t/3600000)).slice(-2), 
      m = ('0' + Math.floor(t % 3600000/60000)).slice(-2), 
      s = ('0' + Math.floor(t % 60000/1000)).slice(-2); 
     var formattedTime = h + ':' + m + ':' + s; 
     $(this.element).html(formattedTime); 
    } 
    }); 
}); 

Example/Demo

Когда таймер обратного отсчета достигнет 0, он переместит текущее положение карусели на последний слайд и остановит счетчик.

Как есть предыдущей и следующие кнопки, которые должны быть включены в моем проекте, пользователь может захотеть, чтобы вручную перейти к этой позиции до того, как таймер обратного отсчета завершен.

Как приостановить или остановить счетчик, если и когда он достигнет последнего слайда?

Answer 1

Вы можете прослушивать событие slick's afterChange, и при его обработке запустите или остановите секундомер в зависимости от того, как позиция текущего слайда сравнивается с общим количеством слайдов. Например:

$('.qa').on('afterChange', function(slick, currentSlide) { 
    if(currentSlide.currentSlide < currentSlide.slideCount - 1) { 
     theStopwatch.start(); 
    } else { 
     theStopwatch.stop(); 
    } 
    }); 

Об изменении страницы, этот фрагмент будет остановить секундомер на последнем слайде и возобновить его на любом предыдущем слайде.

Обратите внимание, что я обращаюсь к вашему секундомеру как theStopwatch. Вам необходимо сделать ваш основной секундомер доступным для вашего обработчика событий.

Источник: http://kenwheeler.github.io/slick/ (поиск «afterChange»)