Создать javascript Автомат c слайдер от одного элемента к другому

Question

Я новичок в javascript, поэтому извиняюсь, если этот вопрос звучит "любительски".

Я пытаюсь создать ползунок javascript, который автоматически перемещается из первого элемента li во второй элемент списка через 2 секунды, пока не пройдет все n-й элемент.

Вот что я сделал для HTML:

 <ul id ="animals">
              <li>dog</li>
              <li>cat</li>
              <li>fish</li>
          </ul>

css:

ul li{
  display: inline;
}

javascript:

<script>
function myFunction() {
  var list = document.getElementById("animals")
  var newLI = document.createElement('li');
  newLI.innerHTML = 'cat';
}
</script>

так что вроде работает как карусель. Каков наилучший подход к продолжению этой задачи?

Answer 1

Очень наивный натив в реализации javascript может выглядеть так: https://stackblitz.com/edit/js-bz9cwi?file=index.js

startCarousel();

function startCarousel() {
  var list = document.getElementById("animals");
  var nrOfItems = list.children.length;
  var counter = 0;
  setInterval(()=>{
    list.children[counter].style["display"] = "none";
    counter = (counter + 1) % nrOfItems;
    list.children[counter].style["display"] = "inline";
  }, 1000);
}

Но вы можете взглянуть на фреймворки, такие как jQuery, bootstrap, ... В них встроены следующие вещи: https://getbootstrap.com/docs/4.0/components/carousel/