[jQuery] JQuery touchslider
jQuery touchslider 소스 보기.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flick Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
<link rel="stylesheet" href="http://dohoons.com/test/flick/common.css" type="text/css" />
<style type="text/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; color:#fff; }
.btn_area { background:#f5f5f5; overflow:hidden; }
.btn_area button { display:block; width:100px; height:36px; background:#000; font-size:16px; color:#fff; font-weight:bold; }
.btn_area button.btn_prev { float:left; }
.btn_area button.btn_next { float:right; }
.btn_area .btn_page { display:inline-block; width:10px; height:10px; margin:3px; font-size:0px; line-height:0; text-indent:-9999px; background:#3399CC; }
.btn_area .btn_page.on { background:#ff0000; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="http://dohoons.com/test/flick/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="http://dohoons.com/test/flick/jquery.touchSlider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#touchSlider").touchSlider({
flexible : true,
btn_prev : $("#touchSlider").next().find(".btn_prev"),
btn_next : $("#touchSlider").next().find(".btn_next"),
counter : function (e) {
$("#count").html("current : " + e.current + ", total : " + e.total);
}
});
$("#touchSlider2").touchSlider({
roll : false,
page : 2,
speed : 300,
btn_prev : $("#touchSlider2").next().find(".btn_prev"),
btn_next : $("#touchSlider2").next().find(".btn_next")
});
$("#touchSlider3").touchSlider({
roll : false,
view : 3,
btn_prev : $("#touchSlider3").next().find(".btn_prev"),
btn_next : $("#touchSlider3").next().find(".btn_next")
});
$("#touchSlider4").touchSlider({
view : 3,
btn_prev : $("#touchSlider4").next().find(".btn_prev"),
btn_next : $("#touchSlider4").next().find(".btn_next")
});
$("#touchSlider5").touchSlider({
flexible : true,
view : 5,
btn_prev : $("#touchSlider5").next().find(".btn_prev"),
btn_next : $("#touchSlider5").next().find(".btn_next")
});
$("#touchSlider6").touchSlider({
flexible : true,
btn_prev : $("#touchSlider6").next().find(".btn_prev"),
btn_next : $("#touchSlider6").next().find(".btn_next"),
initComplete : function (e) {
$("#touchSlider6_paging").html("");
$("#touchSlider6 ul li").each(function (i, el) {
$("#touchSlider6_paging").append('<button type="button" class="btn_page">page' + (i+1) + '</button>');
});
$("#touchSlider6_paging .btn_page").bind("click", function (e) {
var i = $(this).index();
$("#touchSlider6").get(0).go_page(i);
});
},
counter : function (e) {
$("#touchSlider6_paging .btn_page").removeClass("on").eq(e.current-1).addClass("on");
}
});
});
</script>
</head>
<body>
<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 id="touchSlider_paging" class="btn_area" style="text-align:center;"></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 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>5 : multiple, view:5, flexible, rolling</h2>
<div id="touchSlider5">
<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>
content 6
</li>
<li style="background:#396">
content 7
</li>
<li style="background:#39C">
content 8
</li>
<li>
content 9
</li>
<li style="background:#396">
content 10
</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>6 : flexible, rolling, paging, counter</h2>
<div id="touchSlider6">
<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>
content 6
</li>
<li style="background:#396">
content 7
</li>
<li style="background:#39C">
content 8
</li>
<li>
content 9
</li>
<li style="background:#396">
content 10
</li>
</ul>
</div>
<div class="btn_area">
<button type="button" class="btn_prev">prev</button>
<button type="button" class="btn_next">next</button>
</div>
<div id="touchSlider6_paging" class="btn_area" style="text-align:center;"></div>
<br /><br /><br /><br /><br /><br />
</body>
</html>
*. jquery.touchSlider.js 소스 수정 하여 paging 처리.
counter : function () {
if($.inArray(0, this._pos) < 0) {
this.init();
}
this.opts.page = this.get_page().current;
if(typeof(this.opts.counter) == "function") {
this.opts.counter(this.get_page());
}
/*paging*/
var total_page = this._list.length / 3;
var inner_page = '';
for( var i=0; i<total_page; i++ ) {
if( (i+1) == this.opts.page ) {
inner_page += "<font color='red'>" + (i+1) + "</font> ";
}else {
inner_page += (i+1) + " ";
}
}
$("#pager").html( "<B>" + inner_page + "</B>" );
}