JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dohoons.com/test/flick/jquery.touchSlider.js"></script>
<div id="touchSlider6">
	<ul>
		<li>
			content 1
		</li>
		<li style="background:#396">
			content 2
		</li>
		<li style="background:#39C">
			content 3
		</li>
		<li style="background:#33C">
			content 4
		</li>
	</ul>
</div>
<div id="touchSlider6_paging" class="btn_area" style="text-align:center;"></div>

CSS

h1 { font-size:16px; font-weight:bold; }
h2 { margin-top:10px; text-align:center; }

#touchSlider { width:100%; height:150px; margin:0 auto; background:#ccc; position:relative; overflow:hidden; }
#touchSlider ul { width:99999px; height:150px; position:absolute; top:0; left:0; overflow:hidden; }
#touchSlider ul li { float:left; width:100%; height:150px; background:#9C9; font-size:14px; color:#fff; }

#touchSlider2 { width:200px; height:150px; margin:0 auto; background:#ccc; position:relative; overflow:hidden; }
#touchSlider2 ul { width:99999px; height:150px; position:absolute; top:0; left:0; overflow:hidden; }
#touchSlider2 ul li { float:left; width:200px; height:150px; background:#9C9; font-size:14px; color:#fff; }

#touchSlider3 { width:240px; height:150px; margin:0 auto; background:#ccc; position:relative; overflow:hidden; }
#touchSlider3 ul { width:99999px; height:150px; position:absolute; top:0; left:0; overflow:hidden; }
#touchSlider3 ul li { float:left; width:80px; height:150px; background:#9C9; font-size:14px; color:#fff; }

#touchSlider4 { width:240px; height:150px; margin:0 auto; background:#ccc; position:relative; overflow:hidden; }
#touchSlider4 ul { width:99999px; height:150px; position:absolute; top:0; left:0; overflow:hidden; }
#touchSlider4 ul li { float:left; width:80px; height:150px; background:#9C9; font-size:14px; color:#fff; }

#touchSlider5 { width:100%; height:150px; margin:0 auto; background:#ccc; position:relative; overflow:hidden; }
#touchSlider5 ul { width:99999px; height:150px; position:absolute; top:0; left:0; overflow:hidden; }
#touchSlider5 ul li { float:left; width:100%; height:150px; background:#9C9; font-size:14px; color:#fff; }

#touchSlider6 { width:100%; height:150px; margin:0 auto; background:#ccc; position:relative; overflow:hidden; }
#touchSlider6 ul { width:99999px; height:150px; position:absolute; top:0; left:0; overflow:hidden; }
#touchSlider6 ul li { float:left; width:100%; height:150px; background:#9C9; font-size:14px;...

JavaScript

<h1>Flick Navigation (jQuery.touchSlider, dohoons)</h1>
<p>좌우로 터치드래그~ </p>

<h2>1 : rolling, flexible, counter</h2>
<div id="touchSlider">
	<ul>
		<li>
			content 1
		</li>
		<li style="background:#396">
			content 2
		</li>
		<li style="background:#39C">
			content 3
		</li>
		<li style="background:#33C">
			content 4
		</li>
	</ul>
</div>
<div class="btn_area">
	<button type="button" class="btn_prev">prev</button>
	<button type="button" class="btn_next">next</button>
	<div id="count" style="height:36px; font-size:16px; line-height:36px; text-align:center;">
	</div>
</div>

<h2>2 : limit, page:2, speed:300</h2>
<div id="touchSlider2">
	<ul>
		<li>
			content 1
		</li>
		<li style="background:#396">
			content 2
		</li>
		<li style="background:#39C">
			content 3
		</li>
		<li style="background:#33C">
			content 4
		</li>
	</ul>
</div>
<div class="btn_area">
	<button type="button" class="btn_prev">prev</button>
	<button type="button" class="btn_next">next</button>
</div>

<h2>3 : multiple, view:3, limit</h2>
<div id="touchSlider3">
	<ul>
		<li>
			content 1
		</li>
		<li style="background:#396">
			content 2
		</li>
		<li style="background:#39C">
			content 3
		</li>
		<li>
			content 4
		</li>
		<li style="background:#396">
			content 5
		</li>
		<li style="background:#39C">
			content 6
		</li>
		<li>
			content 7
		</li>
		<li style="background:#396">
			content 8
		</li>
		<li style="background:#39C">
			content 9
		</li>
	</ul>
</div>
<div class="btn_area">
	<button type="button" class="btn_prev">prev</button>
	<button type="button" class="btn_next">next</button>
</div>

<h2>4 : multiple, view:3, rolling</h2>
<div id="touchSlider4">
	<ul>
		<li>
			content 1
		</li>
		<li style="background:#396">
			content 2
		</li>
		<li style="background:#39C">
			content 3
		</li>
		<li>
			content 4
		</li>
		<li style="background:#396">
			content 5
		</li>
		<li style="background:#39C">
			content 6
		</li>
		<li>
			content 7
		</li>
		<li...