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

[NeXan]

Здравствуйте. Обратите внимание на слайдер на сайте 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').rem oveClass('active').eq($(this).index()).addClass('a ctive');
});
});
})(jQuery);

[рони]

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

[NeXan]

Спасибо! Мне еще предложили вот такой вариант!
(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').rem oveClass('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').rem oveClass('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').rem oveClass('active').eq($(this).index()).addClass('a ctive');
});
});
})(jQuery);