JSFiddle - React, Tailwind, and code Playground

by kapilgopinath

HTML

<div class="container">
			<div class="slider_wrapper">
				<ul id="image_slider">
					<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/1.jpg"></li>
					<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg"></li>
					<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/5.jpg"></li>
					<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/1.jpg"></li>
					<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/4.jpg"></li>
					<li><img src="https://dl.dropboxusercontent.com/u/65639888/image/5.jpg"></li>
				</ul>					
				<span class="nvgt" id="prev"></span>
				<span class="nvgt" id="next"></span>		
			</div>
			<ul id="pager">
			</ul>
		</div>

CSS

.container{
	width:800px;
	height:400px;
	padding:20px;
	border:1px solid gray;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background: black;	
	text-align: center;
}
.slider_wrapper{
	overflow: hidden;
	position:relative;
	height:280px;
	top:auto;
}
#image_slider{

	position: relative;
	height: auto;
	list-style: none;
	overflow: hidden;
	float: left;
	/*Chrom default padding for ul is 40px */
	padding:0px;
	margin:0px;
}
#image_slider li{
	position: relative;
	float: left;
}
.nvgt{
	position:absolute;
	top: 120px;
	height: 50px;
	width: 30px;
	opacity: 0.6;
}
.nvgt:hover{
	opacity: 0.9;
}
#prev{
	background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/prev.png') no-repeat center;
	left: 0px;
}
#next{
	background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/next.png') no-repeat center;
	right: 0px;
}
#pager{
	/* firefox has different center method. this doesn't work for fire fox */
	/* not in the center*/
	padding:0px;
	position:relative;
	height:50px;
	margin:auto;
	margin-top:10px;
}
#pager li{
	padding: 0px;
	margin:5px;
	width:20px;
	height:20px;
	border:1px solid white;
	color:white;
	list-style: none;
	opacity: 0.6;
	float:left;
	border-radius: 3px;
	cursor: pointer;
}
#pager li:hover{
	opacity:0.9;
}

JavaScript

//1. set ul width 
//2. image when click prev/next button
var ul;
var liItems;
var imageNumber;
var imageWidth;
var prev, next;
var currentPostion = 0;
var currentImage = 0;


function init(){
	ul = document.getElementById('image_slider');
	liItems = ul.children;
	imageNumber = liItems.length;
	imageWidth = liItems[0].children[0].clientWidth;
	ul.style.width = parseInt(imageWidth * imageNumber) + 'px';
	prev = document.getElementById("prev");
	next = document.getElementById("next");
	generatePager(imageNumber);
	//.onclike = slide(-1) will be fired when onload;
	/*
	prev.onclick = function(){slide(-1);};
	next.onclick = function(){slide(1);};*/
	prev.onclick = function(){ onClickPrev();};
	next.onclick = function(){ onClickNext();};
}

function animate(opts){
	var start = new Date;
	var id = setInterval(function(){
		var timePassed = new Date - start;
		var progress = timePassed / opts.duration;
		if (progress > 1){
			progress = 1;
		}
		var delta = opts.delta(progress);
		opts.step(delta);
		if (progress == 1){
			clearInterval(id);
			opts.callback();
		}
	}, opts.delay || 17);
	//return id;
}

function slideTo(imageToGo){
	var direction;
	var numOfImageToGo = Math.abs(imageToGo - currentImage);
	// slide toward left

	direction = currentImage > imageToGo ? 1 : -1;
	currentPostion = -1 * currentImage * imageWidth;
	var opts = {
		duration:1000,
		delta:function(p){return p;},
		step:function(delta){
			ul.style.left = parseInt(currentPostion + direction * delta * imageWidth * numOfImageToGo) + 'px';
		},
		callback:function(){currentImage = imageToGo;}	
	};
	animate(opts);
}

function onClickPrev(){
	if (currentImage == 0){
		slideTo(imageNumber - 1);
	} 		
	else{
		slideTo(currentImage - 1);
	}		
}

function onClickNext(){
	if (currentImage == imageNumber - 1){
		slideTo(0);
	}		
	else{
		slideTo(currentImage + 1);
	}		
}

function generatePager(imageNumber){	
	var pageNumber;
	var pagerDiv = document.getElementById('pager');
	for (i = 0; i < imageNumber;...