JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
	<div class="slide">
		<ul>
			<li class="on"><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
		</ul>
	</div>
	<a href="#" class="sBtn prev">Prev</a>
	<a href="#" class="sBtn next">Next</a>
</div>

CSS

*{margin:0;padding:0;list-style:none;}
#wrap{}
.slide{position:relative;overflow:hidden;}
.slide > ul{position:relative;width:100%;}
.slide > ul li{position:absolute;left:0;top:0;width:100%;display:none;}
.slide > ul li.on{display:block;}
.slide > ul li a{display:block;width:100%;height:500px;background:#ffcc00;color:#fff;text-align:center;}
ul.nav li.on a{color:red;}

JavaScript

var $winw = $(window).width(),
		$wrap = $('#wrap'),
		$wraph = $('#wrap').height(),
		$slide = $('.slide'),
		$slidelist= $('.slide ul'),
		$item = $('.slide').find('li'),
		$itemh = $('.slide').find('a').height(),
		$itemlength = $('.slide').find('li').length,
		$itemleg = $('.slide').find('li').length-1,
		_left = 0,
		_index = 0,
		_delay = 0;
		_delayTime = 500;
		_speed = 300;
	var bStartEvent = false,
		bMoveEvent = false;


	$slide.css({
		'height':$itemh+'px'
	});
$slide.after('<ul class="nav"></ul>');
	$item.each(function(num){
		var navNum;
		var $nav = $('.nav'),
			num = num+1,
			$navlist = '<li><a href=#none>'+num+'</a></li>';
		$nav.append($navlist);
	});
	$('.nav').find('li:first-child').addClass('on');	
	
	$slide.on('touchstart', function (e) {
		var touch = event.touches[0];
		touchstartX = touch.clientX;
		touchstartY = touch.clientY;

		bStartEvent = true;
	});
	$slide.on('touchmove', function (e) {
		if(!bStartEvent) return;
		e.preventDefault();

		var touch = event.changedTouches[event.changedTouches.length - 1],
			touchendX = touch.clientX,
			touchendY = touch.clientY;
		if(Math.abs(touchstartX - touchendX) < Math.abs(touchstartY - touchendY)) return;		
		bMoveEvent = true;
	});
	$slide.on('touchend', function (e) {
		var touch = event.changedTouches[event.changedTouches.length - 1],
			touchendX = touch.clientX,
			touchendY = touch.clientY,
			_left = touchstartX - touchendX;

		_left = (_left>0) ? 0 : 1;

		if(bStartEvent && bMoveEvent){
			moveCon(_left);
		}
		bStartEvent = false;
		bMoveEvent = false;
	});

	function moveCon(_left){
		if(_left<=0) {
			_index++
			if(_index>$itemleg) _index = 0;
		} else {
			_index--
			if(_index<0) _index = $itemleg;
		}

		if(_left<=0){
			$item.eq(_index).addClass('on').css('left', '100%');
			$slidelist.stop(0).animate({left : '-'+100+'%'},_speed, function(){
				moveSet();
			});
		}else{
			$item.eq(_index).addClass('on').css('left', '-100%');
			$slidelist.stop(0).animate({left :...