How do I get my content slideshow to reset its auto-scroll timer after a click?

Question

I am working on a content slideshow -
currently on http://harddrive.co.za/internet-solutions-provider/

Here is the javascript

jQuery(document).ready(function($) {
  setInterval(function() {
    moveRight();
  }, 8000);
  var slideCount = $('#slider-isp ul li').length;
  var slideWidth = $('#slider-isp ul li').width();
  var slideHeight = $('#slider-isp ul li').height();
  var sliderUlWidth = slideCount * slideWidth;
  $('#slider-isp').css({
    width: slideWidth,
    height: slideHeight
  });

  $('#slider-isp ul').css({
    width: sliderUlWidth,
    marginLeft: -slideWidth
  });
  $('#slider-isp ul li:last-child').prependTo('#slider-isp ul');
  function moveLeft() {
    $('#slider-isp ul').animate({
      left: +slideWidth
    }, 1000, function() {
      $('#slider-isp ul li:last-child').prependTo('#slider-isp ul');
      $('#slider-isp ul').css('left', '');
    });
  };

  function moveRight() {
    $('#slider-isp ul').animate({
      left: -slideWidth
    }, 1000, function() {
      $('#slider-isp ul li:first-child').appendTo('#slider-isp ul');
      $('#slider-isp ul').css('left', '');
    });
  };

  $('a.control_prev').click(function() {
    moveLeft();
  });

  $('a.control_next').click(function() {
    moveRight();
  });
});

I have looked at another post for answers
How do I get my image slider to reset its auto-scroll timer after a click?

I want to apply something similar
without destroying my code

Please Help

Answer 1

Since we don't have a verifiable example here, I can suggest the following steps:

• Save your setInterval into a variable.
• On a click event, clear that interval (so it doesn't execute anymore).
• Set the interval again on the same variable.

This will make sure, the same interval will pass after your click.

However, this will require to change your code a bit (not tested, as I don't have the HTML for it):

 jQuery(document).ready(function ($) { // save the timer var tick = setInterval(function () { moveRight(); }, 8000); var slideCount = $('#slider-isp ul li').length; var slideWidth = $('#slider-isp ul li').width(); var slideHeight = $('#slider-isp ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider-isp').css({ width: slideWidth, height: slideHeight }); $('#slider-isp ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('#slider-isp ul li:last-child').prependTo('#slider-isp ul'); function moveLeft() { $('#slider-isp ul').animate({ left: + slideWidth }, 1000, function () { $('#slider-isp ul li:last-child').prependTo('#slider-isp ul'); $('#slider-isp ul').css('left', ''); }); }; function moveRight() { $('#slider-isp ul').animate({ left: - slideWidth }, 1000, function () { $('#slider-isp ul li:first-child').appendTo('#slider-isp ul'); $('#slider-isp ul').css('left', ''); }); }; $('a.control_prev').click(function () { clearInterval(tick); // discard the timer moveLeft(); // do the intended stuff for click // set the timer again tick = setInterval(function () { moveRight(); }, 8000); }); $('a.control_next').click(function () { clearInterval(tick); // discard the timer moveRight(); // do the intended stuff for click // set the timer again tick = setInterval(function () { moveRight(); }, 8000); }); });