JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="slider">
	<li class="box1">1</li>
	<li class="box2">2</li>
	<li class="box3">3</li>
	<li class="box4">4</li>
	<li class="box5">5</li>
</ul>
<button class="prev"><span>prev button</span></button>
<button class="next"><span>next button</span></button>

CSS

.box3 {top:0; left:0; z-index:1;}
.box2 {top:20px; left:20px; z-index:3}
.box1 {top:50px; left:50px; z-index:5;}
.box4 {right:0; top:0; z-index:1;}
.box5 {right:20px; top:20px; z-index:3}

.slider > li:first-child {background:green}
.slider > li:nth-child(2) {background:black}
.slider > li:nth-child(3) {background:gray}
.slider > li:nth-child(4) {background:red}
.slider > li:nth-child(5) {background:blue}

.slider {position:relative; width:250px; height:200px;}
 .slider > li {position:absolute; transition:0.4s ease; width:100px; height:100px; color:#fff; text-align:center; list-style:none;}

JavaScript

var _size = $(".slider li").length, num=0, cnt=num;

$("button").on("click",function(){
	num = cnt;
  
  if($(this).hasClass("prev")){ // prev button click
 		
 
 	}else{ // next button click
 		for (var i=0 ; i< _size ; i++){
    	num++;
      /* if(num==_size-1) cnt=0 */
      console.log("h");
      $(".slider li").eq(i).attr("class", "box"+num);
    }
 
 	}
})