Не срабатывает переключение слайдеров
На странице располагается 2 слайдера. В общем проблема такая, что есть скрипт, который переключает слайдер по нажати на стрелочки, первый forEach и по нажатию на текст, второй forEach. Первый работает без каких-либо проблем, а вот второй, пропускает первый слайдер, и работает только со вторым, то есть переключение по тексту работает только со вторым слайдером. Буду очень признателен, кто объяснит, почему так происходит и где допущена ошибка.
var sliders = document.querySelectorAll('.carousel');
var GodObj = {};
sliders.forEach(function one(items){
var sl = items.querySelector('.gallery').clientWidth;
var width = sl;
var count = 1;
var list = items.querySelector('ul');
var listElem = items.querySelectorAll('li');
var position = 0;
GodObj.Width = +width;
GodObj.List = list;
items.querySelector('.prev').onclick = function(){
position += width*count;
position = Math.min(position,0);
list.style.marginLeft = position + 'px';
}
items.querySelector('.next').onclick = function(){
position -= width*count;
position = Math.max(position, -width*(listElem.length - count));
list.style.marginLeft = position + 'px'
}
});
var textbutton = document.querySelectorAll('.listElementsSlider');
textbutton.forEach(function(items){
var elClick = items.querySelectorAll('li');
elClick[0].onclick = function(){
GodObj.List.style.marginLeft = 0;
}
elClick[1].onclick = function(){
GodObj.List.style.marginLeft = -GodObj.Width*1 + 'px';
}
elClick[2].onclick = function(){
GodObj.List.style.marginLeft = -GodObj.Width*2 + 'px';
}
elClick[3].onclick = function(){
GodObj.List.style.marginLeft = -GodObj.Width*3 + 'px';
}
elClick[4].onclick = function(){
GodObj.List.style.marginLeft = -GodObj.Width*4 + 'px';
}
});