Как анимировать слайдер на сайте посредством AddClass или ToggleClass?
 

Здравствуйте. Обратите внимание на слайдер на сайте https://v-thailand.com/ Я его создал на основе простого исходного кода переключаемых вкладок с контентом. При перемещении указателя мыши по правой колонке с заголовками, скрипт автоматически добавляет и удаляет класс "active" в классах "tabs__content" и "tabs-title".

Поэтому, чтобы реализовать автоматическое переключение вкладок по заданному промежутку времени, неоходимо прописать JS код так, чтобы класс "active" автоматически добавлялся к одной вкладке, затем удалялся и добавлялся к следующей. А при наведения указателя мыши на любой элемент слайдера, анимация приостанавливалась. Подскажите, как все это реализовать? Спасибо!

Сам скрипт слайдера:

(function($) {
$(function() {
 
    $('ul.tabs__caption').on('mouseover', 'div:not(.active)', function() {
        $(this)
            .addClass('active').siblings().removeClass('active')
            .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');
    });
});
})(jQuery);

автопрокрутка tabs
 

NeXan,

$(function() {
    var parent = $(".tabs"),
        title = $(".tabs-title", parent),
        content = $(".tabs__content", parent),
        i = 0,
        len = title.length,
        timer;
    title.each(function(indx, element) {
        $(this).mouseenter(function() {
            i = indx;
            show(true)
        })
    });

    function show(hold) {
        window.clearTimeout(timer);
        title.removeClass("active").eq(i).addClass("active");
        content.removeClass("active").eq(i).addClass("active");
        if (!hold) {
            i = ++i % len;
            timer = window.setTimeout(show, 3E3)
        }
    }
    parent.mouseleave(function() {
        show(false)
    })
});

Спасибо! Мне еще предложили вот такой вариант!

(function($) {
$(function() {
  var count = 0;
  var pos = 0;
  var newTimer = setInterval(function(){timer()}, 1100);
  function timer() {
    $('.tabs-title').removeClass('active').eq(count).addClass('active')
      .closest('div.tabs').find('div.tabs__content').removeClass('active').eq(count).addClass('active');
    count++;
    if (count > 4) count = 0;
  }
  function stopTimer() {
    clearInterval(newTimer);
  }
  $('.tabs').on('mouseleave', function () {
     if (pos.length !== 0) {
        count = pos;
      } else {
      count = 0;
      }
     newTimer = setInterval(function(){timer()}, 1100);
    function timer() {
      $('.tabs-title').removeClass('active').eq(count).addClass('active')
        .closest('div.tabs').find('div.tabs__content').removeClass('active').eq(count).addClass('active');
      count++;
      if (count > 4) count = 0;
    }
  });
  $('.tabs').on('mouseover', function() {
    stopTimer();
  });

  $('.tabs-title').on('mouseover', function(){
    pos = $(this).index();
  });
  $('img').closest('.tabs__content').on('mouseover', function(){
    pos = $(this).index();
  });

  $('ul.tabs__caption').on('mouseover', 'div:not(.active)', function(e) {
    stopTimer();
    $(this)
      .addClass('active').siblings().removeClass('active')
      .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');
  });
  });
})(jQuery);