JSFiddle - React, Tailwind, and code Playground

by Park Mino

HTML

<div id="wrap">
	<div class="slide">
		<ul>
			<li class="on"><a href="#">0</a></li>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
		</ul>
	</div>
</div>

CSS

*{margin:0;padding:0;list-style:none;}
#wrap{position:relative;}
.slide ul{position:absolute;top:0px;left:0px;overflow:hidden;}
.slide ul li{float:left;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;}
.slide ul li:nth-child(2) a{background:#00cc33}
.slide ul li:nth-child(3) a{background:#ff3300}
.slide ul li:nth-child(4) a{background:#000000}
.slide ul li:nth-child(5) a{background:#0033ff}

JavaScript

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


	$slide.css({
		'width':($winw*$itemleg)+'px',
		'height':$itemh+'px'
	});
	$item.css('width',$winw + 'px');
	
	$slide.on('touchstart', function (e) {
		var touch = event.touches[0];
		touchstartX = touch.clientX;
		touchstartY = touch.clientY;

		bStartEvent = true;
		console.log('start');
	});
	$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;
		console.log('end');
	});

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

		$item.removeClass('on')
		$item.eq(_index).addClass('on');
	}