Непрерывное перемещение класса .active по li элементам
 

При загрузке страницы, в меню на элементах li должен присваиваться класс activess, и переключаться на каждый последующий li автоматически, данный скрипт ниже, прошу просмотреть данный скрипт и написать, по возможности, парочку советов, спасибо.

;(function() {
document.addEventListener('DOMContentLoaded', init, false);

function init() {
secondaryNav__menu( jQuery );
}

function secondaryNav__menu ( $ ) {
var $$ = {
button: ('.menu-item')
};

$$.button.addClass('activess');

jQuery('.secondaryNav__menu')({
fade: true,
autoplay: true,
autoplaySpeed: 3500
});
}
}) ();

;(function (window, $, undefined) {

document.addEventListener("DOMContentLoaded", function() {
var li = document.getElementById('menu-item-153');
window.onload = () => {
li.className = 'activess';
console.log(li)
};

runnerController();
jQuery('.secondaryNav__menu').activess({
fade: true,
autoplay: true,
autoplaySpeed: 3500
});
filterSlider( jQuery );

function filterSlider ( $ ) {
var $$ = {
wrapper: $('.secondaryNav__menu'),
slide: $('.secondaryNav__menu').find('.activess'),
window: $(window),
header: $('.mainHeader')
};

var resizeWrapper = function() {
var height = $$.window.height();
var header = $$.header.height();

var wrapperHeight = height - header;

$$.wrapper.height(wrapperHeight);
$$.slide.height(wrapperHeight - 80);
};

window.addEventListener('resize', resizeWrapper);
resizeWrapper();
}

function runnerController() {
var slick = jQuery('.secondaryNav__menu');
var runner = jQuery('activess');
var nav_container = jQuery('.secondaryNav__menu');
var $controller = {
findDestination: function(ns) {
var index = -1 + slick.find('.slick-slide[data-slick-index='+ns+']').data('category-index');
// var destinated = nav_container.find('li').eq(index);
this.calculatePosition(destinated);
},

calculatePosition: function(el) {
var CONST = {
runnerWidth: 100,
runnerHeight: 50
};

var rect = el[0].getBoundingClientRect();

var position = rect.left + (rect.width / 2) - ( CONST.runnerWidth / 2);

// console.log(rect, position);
this.positionRunner(position);
},

positionRunner: function(x) {
runner.get(0).style.transform = `translateX(${x}px`;
},

hover: function(el) {
var index = 1 + nav_container.find('li').index(el);
var slick_node = slick.find('.slick-slide[data-category-index='+index+']').not('.slick-cloned');
var slick_index = slick_node.data('slick-index');

if ( slick_index !== undefined ){
slick.slick('slickGoTo', slick_index);
}
},

onScroll: function(s) {
if ( s > 3 ) {
runner.addClass('hidden');
} else {
runner.removeClass('hidden');
}
}

};
// slick.on('init', function() { $controller.findDestination(0) });
// slick.on('beforeChange', function(event, s, c, nextSlide) { $controller.findDestination(nextSlide) });
// nav_container.find('li').mouseenter(function() { $controller.hover(this) });
// jQuery(window).scroll(function() { $controller.onScroll(jQuery(document).scrollTop()) ; });
}

});

})
(window, jQuery);

табуляцию можно сделать, если вы не делали, через https://beautifier.io/
подсветку можно сделать, нажав кнопочку "манускрипт" выше поля ввода

(function() {
    document.addEventListener('DOMContentLoaded', init, false);

    function init() {
        secondaryNav__menu(jQuery);
    }

    function secondaryNav__menu($) {
        var $$ = {
            button: ('.menu-item')
        };

        $$.button.addClass('activess');

        jQuery('.secondaryNav__menu')({
            fade: true,
            autoplay: true,
            autoplaySpeed: 3500
        });
    }
})();

;
(function(window, $, undefined) {

    document.addEventListener("DOMContentLoaded", function() {
        var li = document.getElementById('menu-item-153');
        window.onload = () => {
            li.className = 'activess';
            console.log(li)
        };

        runnerController();
        jQuery('.secondaryNav__menu').activess({
            fade: true,
            autoplay: true,
            autoplaySpeed: 3500
        });
        filterSlider(jQuery);

        function filterSlider($) {
            var $$ = {
                wrapper: $('.secondaryNav__menu'),
                slide: $('.secondaryNav__menu').find('.activess'),
                window: $(window),
                header: $('.mainHeader')
            };

            var resizeWrapper = function() {
                var height = $$.window.height();
                var header = $$.header.height();

                var wrapperHeight = height - header;

                $$.wrapper.height(wrapperHeight);
                $$.slide.height(wrapperHeight - 80);
            };

            window.addEventListener('resize', resizeWrapper);
            resizeWrapper();
        }

        function runnerController() {
            var slick = jQuery('.secondaryNav__menu');
            var runner = jQuery('activess');
            var nav_container = jQuery('.secondaryNav__menu');
            var $controller = {
                findDestination: function(ns) {
                    var index = -1 + slick.find('.slick-slide[data-slick-index=' + ns + ']').data('category-index');
                    // var destinated = nav_container.find('li').eq(index);
                    this.calculatePosition(destinated);
                },

                calculatePosition: function(el) {
                    var CONST = {
                        runnerWidth: 100,
                        runnerHeight: 50
                    };

                    var rect = el[0].getBoundingClientRect();

                    var position = rect.left + (rect.width / 2) - (CONST.runnerWidth / 2);

                    // console.log(rect, position);
                    this.positionRunner(position);
                },

                positionRunner: function(x) {
                    runner.get(0).style.transform = `translateX(${x}px`;
                },

                hover: function(el) {
                    var index = 1 + nav_container.find('li').index(el);
                    var slick_node = slick.find('.slick-slide[data-category-index=' + index + ']').not('.slick-cloned');
                    var slick_index = slick_node.data('slick-index');

                    if (slick_index !== undefined) {
                        slick.slick('slickGoTo', slick_index);
                    }
                },

                onScroll: function(s) {
                    if (s > 3) {
                        runner.addClass('hidden');
                    } else {
                        runner.removeClass('hidden');
                    }
                }

            };
            // slick.on('init', function() { $controller.findDestination(0) });
            // slick.on('beforeChange', function(event, s, c, nextSlide) { $controller.findDestination(nextSlide) });
            // nav_container.find('li').mouseenter(function() { $controller.hover(this) });
            // jQuery(window).scroll(function() { $controller.onScroll(jQuery(document).scrollTop()) ; });
        }

    });

})
(window, jQuery);

Не понял, как мне это поможет?