JSFiddle - React, Tailwind, and code Playground

by Muhammad Hassaan

HTML

<div id="con_out">
	
	<a href="#" class="prev">Prev</a>
	<a href="#" class="next">Next</a>
	
	<div id="hsn">
		<ul>
			<li class="active"><p>1</p></li>
			<li><p>2</p></li>
			<li><p>3</p></li>
			<li><p>4</p></li>
		</ul>
		<div class="clr"></div>
	</div>

</div>

CSS

*{ margin:0px; padding:0px;}
ul, li{ list-style:none;}
a{ text-decoration:none; display:block;}
img{ border:0px none;}
.clr{ clear:both;}

body{ font-size:16px; font-family:"Times New Roman", Times, serif;}

#con_out{ margin:auto; width:400px; background:#ccc; padding:0px 25px; position:relative;}

#con_out a.prev, #con_out a.next{ position:absolute; top:150px; color:#FF0000; text-decoration:underline; display:inline;}

#con_out a.prev{ left:0px;}
#con_out a.next{ right:0px;}

#con_out a.prev:hover, #con_out a.next:hover{ text-decoration:none;}

#hsn{ width:400px; height:400px; overflow:hidden;}
#hsn ul li{ float:left; line-height:400px; background:#00F; }
#hsn ul li.active{ background:#F00;}

#hsn ul li p{ color:#FFF; font-weight:bold; text-align:center; width:400px;
font-size:100px;}

JavaScript

$(document).ready(function(){
					
	var list_size = $("#hsn ul li").length;
	var list = $("#hsn ul li");
	
	var list_width = $("#hsn ul li").width();
	var all_list_width = list_width * list_size;
	
	var index = 1;
		
	if(index <= list_size){
		$("a.prev").click(function(){
			index--;
			
			$("#hsn ul li").removeClass("active");
			$("#hsn ul li:nth-child("+index+")").css({"margin-left": "-=" + "400px" });
			
			alert(index);
		});
		
		$("a.next").click(function(){
			index++;
			$("#hsn ul li").removeClass("active");
			$("#hsn ul li:nth-child("+index+")").addClass("active").css({"margin-left": "+=" + "-400px" });
				
			alert(index);
		});
		if( index > list_size){
			alert("greater");
		}
	}
});