Функция отвечает только на второй/третий клик по слушателю

Question

Пытаюсь реализовать бесконечный слайдер, который в дальнейшем будет с плавной перемоткой. В данный момент не получается, чтобы перемотка запускалась при первом клике, только со второго или третьего.

const next = document.querySelector('.next'),// кнопка перемотки слайдов
         wrap = document.querySelector('.wrapper');// контейнер со слайдами

      const num = document.querySelectorAll('.num');// слайды (тут получаю для демонстрации)

// функция удаления первого слайда с переносом его в конец родителя
function childRemover() {
  let removed = wrap.removeChild(wrap.firstChild);
  wrap.appendChild(removed);
  }

// реализация слушателя
next.addEventListener('click', () => {
  childRemover();
});

Answer 1

если в разметке есть переносы строки или пробельные символы между слайдами, то перебираться будут и они (текстовые ноды или текстовые узлы), об этом говорится в документации. Поэтому необходимо фильтровать выборку дочернего элемента наподобие этого:

const next = document.querySelector('.next'),// кнопка перемотки слайдов
         wrap = document.querySelector('.wrapper');// контейнер со слайдами

const num = document.querySelectorAll('.num');// слайды (тут получаю для демонстрации)

// функция удаления первого слайда с переносом его в конец родителя
function childRemover() {
  let removed = wrap.firstChild;
    while( removed.nodeType == 3){ // skip TextNodes
    removed = removed.nextSibling;
   }
   wrap.removeChild(removed);
   wrap.appendChild(removed);
}

// реализация слушателя
next.addEventListener('click', () => {
  childRemover();
});

  <div class="wrapper">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    
  </div>
  <button class="next">next</button>

БЛОГ НА HUSL

Функция отвечает только на второй/третий клик по слушателю

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