how to display list items one by one using next and previous buttons with javascript, no jquery please

I'm learning javascript and want to make a very simple slider to understand how things work and use it in my project.

here is the code in codepen and here too

desired result:

div1 is inline by default as first slide.
user press next, will hide div1 then show div2 and so on.
user press previous button, will do the opposite.
user press next at the end or previous at the start of array will loop.

thanks for any help.

https://codepen.io/Willpower_7/pen/gOvJaLe

var listItems = document.getElementById("slides-container-li").children;

function clickNext() {
  listItems[0].style.display = "none";
  listItems[1].style.display = "inline";
}

function clickPrevious() {
  listItems[0].style.display = "inline";
  listItems[1].style.display = "none";
}

.container {
  background: gray;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slides-container-li {
  width: 90%;
  height: 90%;
  background: lightblue;
  display: flex;
  text-align: center;
}

.div1 {
  width: 90%;
  height: 100%;
  background: orange;
  margin: auto;
  display: inline;
  font-size: 100px;
}

.div2 {
  width: 90%;
  height: 100%;
  background: red;
  margin: auto;
  display: none;
  font-size: 100px;
}

.div3 {
  width: 90%;
  height: 100%;
  background: yellow;
  margin: auto;
  display: none;
  font-size: 100px;
}

.btn-container {
  width: 100%;
  display: flex;
  background: lightgray;
  justify-content: center;
}

<div class="container">
  <li class="slides-container-li" id="slides-container-li">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
  </li>
</div>

<div class="btn-container">
  <button class="Previous-btn" id="Previous-btn" onclick="clickPrevious()">Previous</button>
  <button class="slide-btn" id="slide-btn" onclick="clickNext()">next</button>
</div>

Solution

This is an infinity looping slider and will work whatever the count of sliders, please check.

var listItems = document.getElementById("slides-container-li").children;

let currentIndex = 0;



function clickNext() {
  //console.log(currentIndex >= listItems.length - 1);
  if (currentIndex >= listItems.length - 1) {
    currentIndex = -1;
  }
  [...listItems].forEach(item => item.style.display = 'none')
  listItems[++currentIndex].style.display = "inline"
  ;
  //console.log('after increment', currentIndex)
  }

function clickPrevious() {
    if (currentIndex <= 0) {
    currentIndex = listItems.length;
  }
  [...listItems].forEach(item => item.style.display = 'none')
  listItems[--currentIndex].style.display = "inline";
}

.container {
  background: gray;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slides-container-li {
  width: 90%;
  height: 90%;
  background: lightblue;
  display: flex;
  text-align: center;
}

.div1 {
  width: 90%;
  height: 100%;
  background: orange;
  margin: auto;
  display: inline;
  font-size: 100px;
}

.div2 {
  width: 90%;
  height: 100%;
  background: red;
  margin: auto;
  display: none;
  font-size: 100px;
}

.div3 {
  width: 90%;
  height: 100%;
  background: yellow;
  margin: auto;
  display: none;
  font-size: 100px;
}

.btn-container {
  width: 100%;
  display: flex;
  background: lightgray;
  justify-content: center;
  margin-bottom: 100px;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div class="container">
    <li class="slides-container-li" id="slides-container-li">
      <div class="div1">div1</div>
      <div class="div2">div2</div>
      <div class="div3">div3</div>
    </li>
  </div>

  <div class="btn-container">
    <button class="Previous-btn" id="Previous-btn" onclick="clickPrevious()">Previous</button>

    <button class="slide-btn" id="slide-btn" onclick="clickNext()">next</button>

  </div>

</body>

</html>