JSFiddle - React, Tailwind, and code Playground

by Amit Raya

HTML

<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>
		<div class="carousel1">
			<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>
		<ul class="navig">
			<li>
				<a class="d1"></a>
			</li>
			<li>
				<a class="d2"></a>
			</li>
			<li>
				<a class="d3"></a>
			</li>
			<li>
				<a class="d4"></a>
			</li>
			<!-- <li>
				<a class="d5"></a>
			</li>
			<li>
				<a class="d6"></a>
			</li> -->
		</ul>

CSS

.carousel{
	position:relative;
	width:450px;
	min-height: 550px;
	overflow:hidden;
	float:left;
	left:150px; //changed from the last blog to have space enough for two carousel in the page
}
.carousel1{
	position:relative;
	width:450px;
	min-height: 550px;
	overflow:hidden;
	float:left;
	left:150px;
}

.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;
}

.navig{
	position:absolute;
	top:600px;
	left:475px;
}
.navig li{
	list-style: none;
	float:left;
	margin-left:10px;
}
.navig li a{
	padding:10px 5px;
	text-decoration: none;
	position: relative;
	display: inline-block;
	cursor: pointer;
	-webkit-perspective: 500px;
	-moz-perspective: 500px;
	-ms-perspective: 500px;
	-o-perspective: 500px;
	perspective: 500px;
	margin: 0 6px;
	padding: 9px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background: #000;
	background-color: rgb(51, 153, 255,0.6);
}

JavaScript

$(document).ready(function(){
		$( ".one" ).animate({ "left": "+=450px" },"slow"); // initially start with 1
		$(".pointerright").click(function(){ //if the move right pointer is clicked
			moveright(); //point to the moveright function
		});
		$(".pointerleft").click(function(){//if the move left pointer is clicked
			moveleft(); //point to the moveleft function
		});
		
		$(document).keydown(function(e){
	    	if (e.keyCode == 39 || e.keyCode == 40) // Right down arrow 
	    	{
	    		moveright(); //point to the moveright function
	    	}else if (e.keyCode == 37 || e.keyCode == 38) // left up arrow
		    {
		    	moveleft(); //point to the moveleft function
		    }
	  	});
	  	$(".d1").click(function(){
	  		var counter = $(".counter").attr("data-count"); //get the counter value
	  		if(counter==2){
	  			$( ".one" ).animate({ "left": "-=450px" },"slow"); //move the first slide to visible window
				$( ".two" ).animate({ "left": "-=450px" },"slow"); //move the second slide to initial placeholder
	  		}
	  		if(counter==3){
	  			$( ".one" ).animate({ "left": "-=450px" },"slow"); //move the first slide to visible window
				$( ".two" ).animate({ "left": "-=900px" },"slow"); //move the second slide to initial placeholder
				$( ".three" ).animate({ "left": "-=450px" },"slow"); //move the third slide to initial placeholder
	  		}
	  		if(counter==4){
	  			$( ".one" ).animate({ "left": "-=450px" },"slow"); //move the first slide to visible window
				$( ".two" ).animate({ "left": "-=900px" },"slow"); //move the second slide to initial placeholder
				$( ".three" ).animate({ "left": "-=900px" },"slow"); //move the second slide to initial placeholder
				$( ".four" ).animate({ "left": "-=450px" },"slow"); //move the fourth slide to initial placeholder
	  		}
	  		$(".counter").attr("data-count","1"); //set the counter to 1
	  	});
	  	$(".d2").click(function(){
	  		var counter = $(".counter").attr("data-count"); //get the counter value
	  		if(counter==1){
	  			$(...