Показать сообщение отдельно
  #1 (permalink)  
Старый 23.06.2017, 12:13
Новичок на форуме
Отправить личное сообщение для NeXan Посмотреть профиль Найти все сообщения от NeXan
 
Регистрация: 23.06.2017
Сообщений: 7

Как анимировать слайдер на сайте посредством 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);
Ответить с цитированием