JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<body style="background-color:grey;" onload="do_load();">
	<center>
	
		<br />
		<input type="button" onclick="move_last_slide();" value="<-" />
		<input type="button" onclick="move_next_slide();" value="->" /><br />
		<span id="output"></span>
		<br /><br />

		
		<div style="overflow:hidden;width:400px;height:400px;background-color:white;">
			<div class="sliding_div" id="my-div">
				<div id="div0" style="width:400px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;opacity:1;">
					<table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">0</td></tr></table>
				</div>

				<div id="div1" style="width:400px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;opacity:0;">
					<table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">1</td></tr></table>
				</div>

				<div id="div2" style="width:400px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;opacity:0;">
					<table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">2</td></tr></table>
				</div>

				<div id="div3" style="width:400px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;opacity:0;">
					<table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">3</td></tr></table>
				</div>

			</div>
		</div>
	</center>



</body>

CSS

.sliding_div	{
			width:400px;
			position:relative;

			animation-name: right-to-left;
			animation-duration: 1s;
			animation-timing-function: ease; 
			animation-delay: 0s;           
			animation-iteration-count: 1;  
			animation-play-state:paused;
			backface-visibility: hidden;

			-moz-animation-name: right-to-left;
			-moz-animation-duration: 1s;
			-moz-animation-timing-function: ease; 
			-moz-animation-delay: 0s;           
			-moz-animation-iteration-count: 1;  
			-moz-animation-play-state:paused;
			-moz-backface-visibility: hidden;

			-webkit-animation-name: right-to-left;
			-webkit-animation-duration: 1s;
			-webkit-animation-timing-function: ease; 
			-webkit-animation-delay: 0s;           
			-webkit-animation-iteration-count: 1;  
			-webkit-animation-play-state:paused;
			-webkit-backface-visibility: hidden;
		}

		@keyframes right-to-left {
			from {left:0px;}
			to {left:-400px;}
		}

		@-webkit-keyframes right-to-left {
			from {left:0px;}
			to {left:-400px;}
		}

		@-moz-keyframes right-to-left {
			from {left:0px;}
			to {left:-400px;}
		}


		@keyframes left-to-right {
			from {left:0px;}
			to {left:400px;}
		}

		@-webkit-keyframes left-to-right {
			from {left:0px;}
			to {left:<?php echo $slide_width; ?>px;}
		}

		@-moz-keyframes left-to-right {
			from {left:0px;}
			to {left:400px;}
		}

JavaScript

var num_slides=3; // INCLUDES 0!

		var cur_slide=0;

		var last_slide;
		var next_slide;

		var in_motion=0;

		var slide_width = 400;

		function do_load() {
			change_slide(0)
		};

		function change_slide(new_slide_num) {
			cur_slide = new_slide_num;

			if ( cur_slide < 0 ) { cur_slide=num_slides; }
			if ( cur_slide > num_slides ) { cur_slide = 0; }


			last_slide = cur_slide - 1;
			if ( last_slide < 0 ) { last_slide=num_slides; }


			next_slide = cur_slide + 1;
			if ( next_slide > num_slides ) { next_slide = 0;	}

			document.getElementById("output").innerHTML = "cur_slide = " + cur_slide + ", num_slides = " + num_slides + ", next_slide = " + next_slide + ", last_slide = " + last_slide;
		};


		function move_next_slide() {
			if (in_motion==0) {

			for (var i=0;i<=num_slides;i++) { 
				document.getElementById("div" + i).style.opacity="0";
			}

				document.getElementById("div" + cur_slide).style.opacity="1";
				document.getElementById("div" + cur_slide).style.left = ("0px");

				document.getElementById("div" + next_slide).style.opacity="1";
				document.getElementById("div" + next_slide).style.left = (slide_width + "px");

				cur_slide++;
				change_slide(cur_slide);

				in_motion=1;

				document.getElementById("my-div").classList.remove("sliding_div");
				document.getElementById("my-div").offsetWidth = document.getElementById("my-div").offsetWidth;
				document.getElementById("my-div").classList.add("sliding_div");

				document.getElementById("my-div").style.webkitAnimationName="right-to-left";
				document.getElementById("my-div").style.mozAnimationName="right-to-left";
				document.getElementById("my-div").style.animationName="right-to-left";

				document.getElementById("my-div").style.animationPlayState="running";
				document.getElementById("my-div").style.webkitAnimationPlayState="running";
				document.getElementById("my-div").style.mozAnimationPlayState="running";

				setTimeout("move_done()", 1000);
			}
		};

		function...