<!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" />
<style type="text/css">
/* Basic Style START (dohoons, 200803, 200908, 201011, 201106) */
html, body { height:100%; -webkit-text-size-adjust:none; }
body, input, select, button, textarea, h1, h2, h3, h4, h5, h6, table { font:normal 12px/1.5 dotum,"돋움",Arial,AppleGothic,Sans-serif; color:#666; }
html, body, div, form, input, select, button, textarea, legend, fieldset, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, blockquote, address, p, th, td, caption { margin:0; padding:0; }
ol, ul, li { list-style:none; }
img, fieldset { border:0 none; }
input, select, textarea { vertical-align:middle; resize:none; position:relative; }
input, textarea { -webkit-appearance:none; -webkit-border-radius:0; }
input[type="checkbox"] { -webkit-appearance:checkbox; }
input[type="radio"] { -webkit-appearance:radio; -webkit-border-radius:10px; }
button { border:0 none; background:transparent; cursor:pointer; }
hr { display:none; }
legend, .hide { width:0; height:0; visibility:hidden; font-size:0; line-height:0; position:absolute; top:0; left:0; overflow:hidden; }
table caption { width:0; height:0; visibility:hidden; text-indent:-9999px; font-size:0; line-height:0; }
table { border-collapse:collapse; border-spacing:0; }
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption { display:block; }
a:link, a:visited { text-decoration:none; color:#666; }
a:active, a:hover, a:focus { text-decoration:underline; }
input.basic { height:19px; line-height:19px; padding:0 5px; border:1px solid #cacaca; *margin-top:-1px; _margin-top:-2px; }
textarea.basic { border:1px solid #cacaca; padding:5px; overflow:scroll; overflow-x:hidden; *margin-top:-1px; _margin-top:-2px; }
select.basic { height:21px; }
/* Basic Style END */
#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="../js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="../js/jquery.touchSlider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#touchSlider6").touchSlider({
flexible : true,
initComplete : function (e) {
$("#touchSlider6_paging").html("");
var num = 1;
$("#touchSlider6 ul li").each(function (i, el) {
if((i+1) % e._view == 0) {
$("#touchSlider6_paging").append('<button type="button" class="btn_page">page' + (num++) + '</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>
<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 style="background:#33C">
content 4
</li>
</ul>
</div>
<div id="touchSlider6_paging" class="btn_area" style="text-align:center;"></div>
</body>
</html>
jquery.event.drag-1.5.min.js
/*
jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threedubmedia.com)
Liscensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt
*/
(function(E){E.fn.drag=function(L,K,J){if(K){this.bind("dragstart",L)}if(J){this.bind("dragend",J)}return !L?this.trigger("drag"):this.bind("drag",K?K:L)};var A=E.event,B=A.special,F=B.drag={not:":input",distance:0,which:1,dragging:false,setup:function(J){J=E.extend({distance:F.distance,which:F.which,not:F.not},J||{});J.distance=I(J.distance);A.add(this,"mousedown",H,J);if(this.attachEvent){this.attachEvent("ondragstart",D)}},teardown:function(){A.remove(this,"mousedown",H);if(this===F.dragging){F.dragging=F.proxy=false}G(this,true);if(this.detachEvent){this.detachEvent("ondragstart",D)}}};B.dragstart=B.dragend={setup:function(){},teardown:function(){}};function H(L){var K=this,J,M=L.data||{};if(M.elem){K=L.dragTarget=M.elem;L.dragProxy=F.proxy||K;L.cursorOffsetX=M.pageX-M.left;L.cursorOffsetY=M.pageY-M.top;L.offsetX=L.pageX-L.cursorOffsetX;L.offsetY=L.pageY-L.cursorOffsetY}else{if(F.dragging||(M.which>0&&L.which!=M.which)||E(L.target).is(M.not)){return }}switch(L.type){case"mousedown":E.extend(M,E(K).offset(),{elem:K,target:L.target,pageX:L.pageX,pageY:L.pageY});A.add(document,"mousemove mouseup",H,M);G(K,false);F.dragging=null;return false;case !F.dragging&&"mousemove":if(I(L.pageX-M.pageX)+I(L.pageY-M.pageY)<M.distance){break}L.target=M.target;J=C(L,"dragstart",K);if(J!==false){F.dragging=K;F.proxy=L.dragProxy=E(J||K)[0]}case"mousemove":if(F.dragging){J=C(L,"drag",K);if(B.drop){B.drop.allowed=(J!==false);B.drop.handler(L)}if(J!==false){break}L.type="mouseup"}case"mouseup":A.remove(document,"mousemove mouseup",H);if(F.dragging){if(B.drop){B.drop.handler(L)}C(L,"dragend",K)}G(K,true);F.dragging=F.proxy=M.elem=false;break}return true}function C(M,K,L){M.type=K;var J=E.event.handle.call(L,M);return J===false?false:J||M.result}function I(J){return Math.pow(J,2)}function D(){return(F.dragging===false)}function G(K,J){if(!K){return }K.unselectable=J?"off":"on";K.onselectstart=function(){return J};if(K.style){K.style.MozUserSelect=J?"":"none"}}})(jQuery);
jquery.touchSlider.js
/**
* @name jQuery.touchSlider
* @author dohoons ( http://dohoons.com/ )
*
* @version 201504
* @since 201106
*
* @param Object settings 환경변수 오브젝트
* roll - 순환 (default true)
* flexible - 유동 레이아웃 (default false)
* view - 다중 컬럼 (default 1)
* speed - 애니메이션 속도 (default 75)
* range - 넘김 판정 범위 (default 0.15)
* page - 초기 페이지 (default 1)
* transition - CSS3 transition 사용 (default true)
* btn_prev - prev 버튼 (jQuery Object, default null)
* btn_next - next 버튼 (jQuery Object, default null)
* paging - page 버튼 (jQuery Object, default null)
* initComplete - 초기화 콜백
* counter - 슬라이드 콜백, 카운터
*
* @example
$("#target").touchSlider({
flexible : true
});
*/
(function ($) {
$.fn.touchSlider = function (settings) {
settings.supportsCssTransitions = (function (style) {
var prefixes = ['Webkit','Moz','Ms'];
for(var i=0, l=prefixes.length; i < l; i++ ) {
if( typeof style[prefixes[i] + 'Transition'] !== 'undefined') {
return true;
}
}
return false;
})(document.createElement('div').style);
settings = jQuery.extend({
roll : true,
flexible : false,
btn_prev : null,
btn_next : null,
paging : null,
speed : 75,
view : 1,
range : 0.15,
page : 1,
transition : true,
initComplete : null,
counter : null
}, settings);
var opts = [];
opts = $.extend({}, $.fn.touchSlider.defaults, settings);
return this.each(function () {
var _this = this;
$.fn.extend(this, touchSlider);
this.opts = opts;
this.init();
$(window).bind("orientationchange resize", function () {
_this.resize(_this);
});
});
};
var touchSlider = {
init : function () {
var _this = this;
this._view = this.opts.view;
this._speed = this.opts.speed;
this._tg = $(this);
this._list = this._tg.children().children();
this._width = parseInt(this._tg.css("width"));
this._item_w = parseInt(this._list.css("width"));
this._len = this._list.length;
this._range = this.opts.range * this._width;
this._pos = [];
this._start = [];
this._startX = 0;
this._startY = 0;
this._left = 0;
this._top = 0;
this._drag = false;
this._scroll = false;
this._btn_prev;
this._btn_next;
$(this)
.unbind("touchstart", this.touchstart)
.unbind("touchmove", this.touchmove)
.unbind("touchend", this.touchend)
.unbind("dragstart", this.touchstart)
.unbind("drag", this.touchmove)
.unbind("dragend", this.touchend)
.bind("touchstart", this.touchstart)
.bind("touchmove", this.touchmove)
.bind("touchend", this.touchend)
.bind("dragstart", this.touchstart)
.bind("drag", this.touchmove)
.bind("dragend", this.touchend)
$(this).children().css({
"width":this._width + "px",
"overflow":"visible"
});
if(this.opts.flexible) this._item_w = this._width / this._view;
if(this.opts.roll) {
if(this._len % this._view > 0) {
var blank = $(document.createElement(this._list.eq(0).eq(0).prop("tagName"))).hide();
var cnt = this._view - (this._len % this._view);
for(var i=0; i<cnt; ++i) {
this._list.parent().append(blank.clone());
}
}
this._list = this._tg.children().children();
this._len = this._list.length;
this._len = (this._len / this._view) * this._view;
}
var page_gap = (this.opts.page > 1 && this.opts.page <= this._len) ? (this.opts.page - 1) * this._item_w : 0;
for(var i=0; i<this._len; ++i) {
this._pos[i] = this._item_w * i - page_gap;
this._start[i] = this._pos[i];
this._list.eq(i).css({
"float" : "none",
"position" : "absolute",
"top" : "0",
"left" : this._pos[i] + "px",
"width" : this._item_w + "px"
});
if(this.opts.supportsCssTransitions && this.opts.transition) {
this._list.eq(i).css({
"-moz-transition" : "0ms",
"-moz-transform" : "",
"-ms-transition" : "0ms",
"-ms-transform" : "",
"-webkit-transition" : "0ms",
"-webkit-transform" : "",
"transition" : "0ms",
"transform" : ""
});
}
}
if(this.opts.btn_prev && this.opts.btn_next) {
this.opts.btn_prev.unbind("click").bind("click", function() {
_this.animate(1, true);
return false;
})
this.opts.btn_next.unbind("click").bind("click", function() {
_this.animate(-1, true);
return false;
});
}
if(this.opts.paging) {
$(this._list).each(function (i, el) {
var btn_page = _this.opts.paging.eq(0).clone();
_this.opts.paging.before(btn_page);
btn_page.bind("click", function(e) {
_this.go_page(i, e);
return false;
});
});
this.opts.paging.remove();
}
this.initComplete();
this.counter();
},
initComplete : function () {
if(typeof(this.opts.initComplete) == "function") {
this.opts.initComplete(this);
}
},
resize : function (e) {
if(e.opts.flexible) {
var tmp_w = e._item_w;
e._width = parseInt(e._tg.css("width"));
e._item_w = e._width / e._view;
e._range = e.opts.range * e._width;
for(var i=0; i<e._len; ++i) {
e._pos[i] = e._pos[i] / tmp_w * e._item_w;
e._start[i] = e._start[i] / tmp_w * e._item_w;
e._list.eq(i).css({
"left" : e._pos[i] + "px",
"width" : e._item_w + "px"
});
if(this.opts.supportsCssTransitions && this.opts.transition) {
e._list.eq(i).css({
"-moz-transition" : "0ms",
"-moz-transform" : "",
"-ms-transition" : "0ms",
"-ms-transform" : "",
"-webkit-transition" : "0ms",
"-webkit-transform" : "",
"transition" : "0ms",
"transform" : ""
});
}
}
}
this.counter();
},
touchstart : function (e) {
if((e.type == "touchstart" && e.originalEvent.touches.length <= 1) || e.type == "dragstart") {
this._startX = e.pageX || e.originalEvent.touches[0].pageX;
this._startY = e.pageY || e.originalEvent.touches[0].pageY;
this._scroll = false;
this._start = [];
for(var i=0; i<this._len; ++i) {
this._start[i] = this._pos[i];
}
}
},
touchmove : function (e) {
if((e.type == "touchmove" && e.originalEvent.touches.length <= 1) || e.type == "drag") {
this._left = (e.pageX || e.originalEvent.touches[0].pageX) - this._startX;
this._top = (e.pageY || e.originalEvent.touches[0].pageY) - this._startY;
var w = this._left < 0 ? this._left * -1 : this._left;
var h = this._top < 0 ? this._top * -1 : this._top;
if (w < h || this._scroll) {
this._left = 0;
this._drag = false;
this._scroll = true;
} else {
if ( navigator.userAgent.indexOf("android 4.1") > -1 ) {
e.stopPropagation();
} else {
e.preventDefault();
}
this._drag = true;
this._scroll = false;
this.position(e);
}
for(var i=0; i<this._len; ++i) {
var tmp = this._start[i] + this._left;
if(this.opts.supportsCssTransitions && this.opts.transition) {
var trans = "translate3d(" + tmp + "px,0,0)";
this._list.eq(i).css({
"left" : "",
"-moz-transition" : "0ms",
"-moz-transform" : trans,
"-ms-transition" : "0ms",
"-ms-transform" : trans,
"-webkit-transition" : "0ms",
"-webkit-transform" : trans,
"transition" : "0ms",
"transform" : trans
});
} else {
this._list.eq(i).css("left", tmp + "px");
}
this._pos[i] = tmp;
}
}
},
touchend : function (e) {
if((e.type == "touchend" && e.originalEvent.touches.length <= 1) || e.type == "dragend") {
if(this._scroll) {
this._drag = false;
this._scroll = false;
return false;
}
this.animate(this.direction());
this._drag = false;
this._scroll = true;
}
},
position : function (d) {
var gap = this._view * this._item_w;
if(d == -1 || d == 1) {
this._startX = 0;
this._start = [];
for(var i=0; i<this._len; ++i) {
this._start[i] = this._pos[i];
}
this._left = d * gap;
} else {
if(this._left > gap) this._left = gap;
if(this._left < - gap) this._left = - gap;
}
if(this.opts.roll) {
var tmp_pos = [];
for(var i=0; i<this._len; ++i) {
tmp_pos[i] = this._pos[i];
}
tmp_pos.sort(function(a,b){return a-b;});
var max_chk = tmp_pos[this._len-this._view];
var p_min = $.inArray(tmp_pos[0], this._pos);
var p_max = $.inArray(max_chk, this._pos);
if(this._view <= 1) max_chk = this._len - 1;
if((d == 1 && tmp_pos[0] >= 0) || (this._drag && tmp_pos[0] > 0)) {
for(var i=0; i<this._view; ++i, ++p_min, ++p_max) {
this._start[p_max] = this._start[p_min] - gap;
this._list.eq(p_max).css("left", this._start[p_max] + "px");
}
} else if((d == -1 && tmp_pos[max_chk] <= 0) || (this._drag && tmp_pos[max_chk] <= 0)) {
for(var i=0; i<this._view; ++i, ++p_min, ++p_max) {
this._start[p_min] = this._start[p_max] + gap;
this._list.eq(p_min).css("left", this._start[p_min] + "px");
}
}
} else {
if(this.limit_chk()) this._left = this._left / 2;
}
},
animate : function (d, btn_click) {
if(this._drag || !this._scroll || btn_click) {
var _this = this;
var speed = this._speed;
if(btn_click) this.position(d);
var gap = d * (this._item_w * this._view);
if(this._left == 0 || (!this.opts.roll && this.limit_chk()) ) gap = 0;
this._list.each(function (i, el) {
_this._pos[i] = _this._start[i] + gap;
if(_this.opts.supportsCssTransitions && _this.opts.transition) {
var transition = speed + "ms";
var transform = "translate3d(" + _this._pos[i] + "px,0,0)";
if(btn_click) transition = "0ms";
$(this).css({
"left" : "",
"-moz-transition" : transition,
"-moz-transform" : transform,
"-ms-transition" : transition,
"-ms-transform" : transform,
"-webkit-transition" : transition,
"-webkit-transform" : transform,
"transition" : transition,
"transform" : transform
});
} else {
$(this).animate({"left": _this._pos[i] + "px"}, speed);
}
});
this.counter();
}
},
direction : function () {
var r = 0;
if(this._left < -(this._range)) r = -1;
else if(this._left > this._range) r = 1;
if(!this._drag || this._scroll) r = 0;
return r;
},
limit_chk : function () {
var last_p = parseInt((this._len - 1) / this._view) * this._view;
return ( (this._start[0] == 0 && this._left > 0) || (this._start[last_p] == 0 && this._left < 0) );
},
go_page : function (i, e) {
var crt = ($.inArray(0, this._pos) / this._view) + 1;
var cal = crt - (i + 1);
while(cal != 0) {
if(cal < 0) {
this.animate(-1, true);
cal++;
} else if(cal > 0) {
this.animate(1, true);
cal--;
}
}
},
get_page : function () {
return {
total : Math.ceil(this._len / this._view),
current : ($.inArray(0, this._pos) / this._view) + 1
}
},
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());
}
}
};
})(jQuery);
출처 http://dohoons.com/test/flick/
