автоматическое переключение между вкладками - но при перезапуске по клику

Question

У меня есть этот код для автоматического переключения между вкладками:

// starting index
var currTab = 0;

// count of all tabs
var totalTabs = jQuery(".shapedo-tabs > .single-tab").length;

// function to pass to setInterval
function cycle() {

  // simulate click on current tab
  jQuery(".shapedo-tabs > .single-tab").eq(currTab).click();

  // increment counter   
  currTab++;

  // reset if we're at the last one
  if (currTab == totalTabs) {
    currTab = 0;
  }
}

jQuery(".single-tab").click(function() {
  var forTab = jQuery(this).attr("for");
  jQuery(this).addClass("activetab");
  jQuery(".single-tab").not(this).removeClass("activetab");
  jQuery(".stab-content#" + forTab).addClass("activecontent");
  jQuery(".stab-content").not("#" + forTab).removeClass("activecontent");
});

jQuery(".page-template").each(function() {
  jQuery('.start-tabs').isInViewport(function(status) {
    if (status === 'entered') {
      jQuery(".single-tab").eq(0).trigger("click");
      jQuery(".shapedo-tabs").each(function() {
        var i = setInterval(cycle, 5000);
      });
    }
  })
});

HTML для области триггеров выглядит примерно так:

<div class="shapedo-tabs product-tabs">


  <div class="single-tab" for="track-design-changes">
    <h3 class="stab-title">Track Design Changes</h3>
    <span class="stab-number">1.</span>
  </div>

  <div class="single-tab" for="create-aneffecient-process">
    <h3 class="stab-title">Create an<br>Effecient Process</h3>
    <span class="stab-number">2.</span>
  </div>

  <div class="single-tab" for="control-issues">
    <h3 class="stab-title">Control Issues</h3>
    <span class="stab-number">3.</span>
  </div>

  <div class="single-tab" for="be-preparedfor-disputes">
    <h3 class="stab-title">Be Prepared<br>for Disputes</h3>
    <span class="stab-number">4.</span>
  </div>

  <div class="single-tab activetab" for="constantly-improve">
    <h3 class="stab-title">Constantly Improve</h3>
    <span class="stab-number">5.</span>
  </div>


</div>

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

Как мне сбросить счетчик и перезапустить его с текущей нажатой вкладки?

Answer 1

Хорошо, получил это для работы методом переключения:

jQuery(".single-tab").click(function() {
  var forTab = jQuery(this).attr("for");
  jQuery(this).addClass("activetab");
  jQuery(".single-tab").not(this).removeClass("activetab");
  jQuery(".stab-content#" + forTab).addClass("activecontent");
  jQuery(".stab-content").not("#" + forTab).removeClass("activecontent");
});



jQuery(function() {

  //cache a reference to the tabs
  var tabs = jQuery('.shapedo-tabs .single-tab');



  //auto-rotate every 5 seconds
  setInterval(function() {

    //get currently-on tab
    var onTab = tabs.filter('.activetab');

    //click either next tab, if exists, else first one
    var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first();
    nextTab.click();
  }, 5000);
});

рабочий JSFiddle: https://jsfiddle.net/idoangel/q8rtw4ny/