Не срабатывает переключение слайдеров

На странице располагается 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';
  }
});

Ответы (0 шт):