JSFiddle - React, Tailwind, and code Playground

by Amit Raya

HTML

<body>
		<div class="carousel">
			<div class="main one">
				<div class="inside"></div>
			</div>
			<div class="main two">
				<div class="inside"></div>
			</div>
			<div class="main three">
				<div class="inside"></div>
			</div>
			<div class="main four">
				<div class="inside"></div>
			</div>
			<div class="pointerleft">
				<img src="Images/llt.png" />
			</div>
			<div class="pointerright">
				<img src="Images/right.png" />
			</div>
			<div class="counter" data-count="1"></div>
		</div>
	</body>

CSS

.carousel{
	position:relative;
	width:450px;
	min-height: 550px;
	overflow:hidden;
	left:400px;
}
.main{
	position:absolute;
	margin-left: -450px;;
}
.inside{
	min-width: 400px;
	min-height: 500px;
	background-color:yellow;
	margin:20px;
}
.one{
	background-color:green;
}

.two{
	background-color:red;
}
.three{
	background-color:grey;
}

.four{
	background-color:blue;
}

.pushright{
	right:300px;
}

.pointerright, .pointerleft{
	position:absolute;
	top:230px;
}

.pointerleft{
	left:-43px;
}
.pointerright{
	right:-43px;
}

JavaScript

$(document).ready(function(){
		$( ".one" ).animate({ "left": "+=450px" },"slow"); // initially start with 1
		$(".pointerright").click(function(){ //if the move right pointer is clicked
			var counter = $(".counter").attr("data-count"); //get the counter value
			if (counter == 1){ //if 1 is showing 
				$( ".one" ).animate({ "left": "+=450px" },"slow"); //push one out of the visible window to after visible placeholder
				$( ".two" ).animate({ "left": "+=450px" },"slow"); //push two in the visible window
				$(".counter").attr("data-count","2"); //set the counter value to 2
			}else if(counter==2){ //if 2 is showing
				$( ".two" ).animate({ "left": "+=450px" },"slow"); //push two out of the visible window to after visible placeholder
				$( ".three" ).animate({ "left": "+=450px" },"slow"); //push three in the visible window
				$(".counter").attr("data-count","3"); // set the counter value to 3
			}else if(counter==3){ //if three is showing
				$( ".three" ).animate({ "left": "+=450px" },"slow"); //push three out of the visible window to after visible placeholder
				$( ".four" ).animate({ "left": "+=450px" },"slow"); //push four in the visible window
				$(".counter").attr("data-count","4"); //set the counter value to 4
			}else if(counter==4){ // if four is showing, this is little tricky
				$( ".one" ).animate({ "left": "-=900px" },"fast"); // move first div to initial placeholder on the left
				$( ".two" ).animate({ "left": "-=900px" },"fast"); // move second div to initial placeholder on the left
				$( ".three" ).animate({ "left": "-=900px" },"fast"); // move third div to initial placeholder on the left
				$( ".four" ).animate({ "left": "-=450px" },"fast"); // move fourth div to initial placeholder on the left
				//note that the fourth div is pulled only 450px because it is currently in the visible window
				$( ".one" ).animate({ "left": "+=450px" },"slow"); // move first div to visible window
				$(".counter").attr("data-count","1"); //set the...