JSFiddle - React, Tailwind, and code Playground

by Alaksandar Jesus Gene

HTML

<div>Current Slide <span id="slideIndex"></span></div>
<ul id="slider">
<li><img src="https://picsum.photos/200/300" alt="">  </li>
<li><img src="https://picsum.photos/201/301" alt="">  </li>
<li><img src="https://picsum.photos/202/302" alt=""></li>
<li>  <img src="https://picsum.photos/203/303" alt=""></li>
  
  
  

</ul>

CSS

img{
  width: 100%;
  height: 200px;
}
ul, li{
  list-style: none;
  margin:0;
  padding:0;
}

ul#slider li:not(:first-child){ /* hide 2,3,4... images*/
  display: none;
}

JavaScript

const slider = document.getElementById("slider"); // capture slider element
const slideIndex = document.getElementById("slideIndex"); // to display  current slide index
const sliderlis = slider.querySelectorAll("li"); // capture all li elements
const sliderlisLength = sliderlis.length; // calculate li elements lis
const sliderDuration = 2000; // set slider duration

let sliderCurrentIndex = 0; // set inital value to 0
slideIndex.innerText = sliderCurrentIndex; // set current visible slide index

setInterval(function(){ // execute a function after slider duration time.
sliderCurrentIndex++; // increment current index
if(sliderCurrentIndex >= sliderlisLength){ //verify if it is the last image
sliderCurrentIndex = 0; // if true, reset current index to 0 (first image)
}
sliderlis.forEach(function(element, index){ // run a loop on all image lis
  element.style.display = 'none'; // set all to none by default
	if(index === sliderCurrentIndex){ // if current index equal image index
    element.style.display = 'block'; //display block of image
  }
});
slideIndex.innerText = sliderCurrentIndex; // update index value for verification
}, sliderDuration);