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

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 >
  <li  id="slides-container-li">
    <div >div1</div>
    <div >div2</div>
    <div >div3</div>
  </li>
</div>

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

CodePudding user response：

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 >
    <li  id="slides-container-li">
      <div >div1</div>
      <div >div2</div>
      <div >div3</div>
    </li>
  </div>

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

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

  </div>

</body>

</html>

CodePudding user response：

you can do like this , you have to take one runtime variable & change it's value on onclick function

let currentPageNum = 0;

function clickNext() {
  if(listItems.length-1 != currentPageNum){
    listItems[currentPageNum].style.display = "none";
    listItems[currentPageNum 1].style.display = "inline";
    currentPageNum = currentPageNum 1;
  }
}

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