Показать сообщение отдельно
  #1 (permalink)  
Старый 03.04.2019, 10:55
Новичок на форуме
Отправить личное сообщение для maxthecreator Посмотреть профиль Найти все сообщения от maxthecreator
 
Регистрация: 03.04.2019
Сообщений: 5

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