Непрерывное перемещение класса .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);
|