JSFiddle - React, Tailwind, and code Playground

HTML

<div style="margin: 10px auto; width:1216px; height: 400px; text-align: center;">
                  <div style="width: 960px; display: inline-block; height: 400px; position: relative;">
                      <article style="width:960px; height: 400px; position: absolute; background-image:url(1.jpg); z-index: 10;"></article>
                      <article style="width:960px; height: 400px;  position: absolute; background-image:url(2.jpg);   z-index: 1;"></article>
                      <article style="width:960px; height: 400px; position: absolute; background-image:url(3.jpg);   z-index: 1;"></article>
                      <article style="width:960px; height: 400px; position: absolute; background-image:url(4.jpg);   z-index: 1;"></article>
                      <article style="width:960px; height: 400px; position: absolute; background-image:url(5.jpg); z-index: 1;"></article>
                      <div onclick="next()" style="left:1000px; position: absolute; top: 180px; background-image:url('next.png'); height: 68px; width: 68px;"></div>
                      <div onclick="prev()" style="right:1000px; position: absolute; top: 180px; background-image:url('prev.png'); height: 68px; width: 68px;"></div>
                  </div>   
          </div>

JavaScript

function next(){
    var slider = document.getElementsByTagName("article");
    var count = slider.length - 1;
    for(var i = 0; i < slider.length; i++){
      if(slider[i].style.zIndex == "10"){
        slider[i].style.zIndex = 1;
        slider[i + 1].style.zIndex = 10;
        break;
      }
  }
};
next();