From bf6d89c637433128f094ce3d345ecc10fcc5452a Mon Sep 17 00:00:00 2001
From: chicpro <chicpro@gmail.com>
Date: Fri, 11 Oct 2013 17:42:49 +0900
Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=87=BC?=
 =?UTF-8?q?=ED=95=91=EB=AA=B0=20=EB=A9=94=EC=9D=B8=20swipe=20=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/mobile_shop.css                     |   4 +
 js/jquery.event.move.js                 | 580 ++++++++++++++++++++++++
 js/jquery.event.swipe.js                | 130 ++++++
 js/jquery.slideview.js                  | 128 ++++++
 mobile/shop/index.php                   |  33 +-
 mobile/skin/shop/basic/main.10.skin.php |   2 +-
 6 files changed, 871 insertions(+), 6 deletions(-)
 create mode 100644 js/jquery.event.move.js
 create mode 100644 js/jquery.event.swipe.js
 create mode 100644 js/jquery.slideview.js

diff --git a/css/mobile_shop.css b/css/mobile_shop.css
index a68b3f3a9..3bb08bfb1 100644
--- a/css/mobile_shop.css
+++ b/css/mobile_shop.css
@@ -57,6 +57,10 @@ a.sanchor_on {background:#626870;color:#fff !important;text-decoration:none}
 /* ########## 쇼핑몰 컨텐츠 ########## */
 /* 인덱스 이미지 출력 */
 #sidx {padding:0}
+.sidx {position:relative;width:100%;overflow:hidden;}
+
+/* 인덱스 상품 */
+.sidx_slide {position:absolute;top:0;left:0;width:100%}
 
 /* 상품 목록 */
 #sct {}
diff --git a/js/jquery.event.move.js b/js/jquery.event.move.js
new file mode 100644
index 000000000..cf3352ee6
--- /dev/null
+++ b/js/jquery.event.move.js
@@ -0,0 +1,580 @@
+// jquery.event.move
+//
+// 1.3.1
+//
+// Stephen Band
+//
+// Triggers 'movestart', 'move' and 'moveend' events after
+// mousemoves following a mousedown cross a distance threshold,
+// similar to the native 'dragstart', 'drag' and 'dragend' events.
+// Move events are throttled to animation frames. Move event objects
+// have the properties:
+//
+// pageX:
+// pageY:   Page coordinates of pointer.
+// startX:
+// startY:  Page coordinates of pointer at movestart.
+// distX:
+// distY:  Distance the pointer has moved since movestart.
+// deltaX:
+// deltaY:  Distance the finger has moved since last event.
+// velocityX:
+// velocityY:  Average velocity over last few events.
+
+
+(function (module) {
+	if (typeof define === 'function' && define.amd) {
+		// AMD. Register as an anonymous module.
+		define(['jquery'], module);
+	} else {
+		// Browser globals
+		module(jQuery);
+	}
+})(function(jQuery, undefined){
+
+	var // Number of pixels a pressed pointer travels before movestart
+	    // event is fired.
+	    threshold = 6,
+
+	    add = jQuery.event.add,
+
+	    remove = jQuery.event.remove,
+
+	    // Just sugar, so we can have arguments in the same order as
+	    // add and remove.
+	    trigger = function(node, type, data) {
+	    	jQuery.event.trigger(type, data, node);
+	    },
+
+	    // Shim for requestAnimationFrame, falling back to timer. See:
+	    // see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+	    requestFrame = (function(){
+	    	return (
+	    		window.requestAnimationFrame ||
+	    		window.webkitRequestAnimationFrame ||
+	    		window.mozRequestAnimationFrame ||
+	    		window.oRequestAnimationFrame ||
+	    		window.msRequestAnimationFrame ||
+	    		function(fn, element){
+	    			return window.setTimeout(function(){
+	    				fn();
+	    			}, 25);
+	    		}
+	    	);
+	    })(),
+
+	    ignoreTags = {
+	    	textarea: true,
+	    	input: true,
+	    	select: true,
+	    	button: true
+	    },
+
+	    mouseevents = {
+	    	move: 'mousemove',
+	    	cancel: 'mouseup dragstart',
+	    	end: 'mouseup'
+	    },
+
+	    touchevents = {
+	    	move: 'touchmove',
+	    	cancel: 'touchend',
+	    	end: 'touchend'
+	    };
+
+
+	// Constructors
+
+	function Timer(fn){
+		var callback = fn,
+				active = false,
+				running = false;
+
+		function trigger(time) {
+			if (active){
+				callback();
+				requestFrame(trigger);
+				running = true;
+				active = false;
+			}
+			else {
+				running = false;
+			}
+		}
+
+		this.kick = function(fn) {
+			active = true;
+			if (!running) { trigger(); }
+		};
+
+		this.end = function(fn) {
+			var cb = callback;
+
+			if (!fn) { return; }
+
+			// If the timer is not running, simply call the end callback.
+			if (!running) {
+				fn();
+			}
+			// If the timer is running, and has been kicked lately, then
+			// queue up the current callback and the end callback, otherwise
+			// just the end callback.
+			else {
+				callback = active ?
+					function(){ cb(); fn(); } :
+					fn ;
+
+				active = true;
+			}
+		};
+	}
+
+
+	// Functions
+
+	function returnTrue() {
+		return true;
+	}
+
+	function returnFalse() {
+		return false;
+	}
+
+	function preventDefault(e) {
+		e.preventDefault();
+	}
+
+	function preventIgnoreTags(e) {
+		// Don't prevent interaction with form elements.
+		if (ignoreTags[ e.target.tagName.toLowerCase() ]) { return; }
+
+		e.preventDefault();
+	}
+
+	function isLeftButton(e) {
+		// Ignore mousedowns on any button other than the left (or primary)
+		// mouse button, or when a modifier key is pressed.
+		return (e.which === 1 && !e.ctrlKey && !e.altKey);
+	}
+
+	function identifiedTouch(touchList, id) {
+		var i, l;
+
+		if (touchList.identifiedTouch) {
+			return touchList.identifiedTouch(id);
+		}
+
+		// touchList.identifiedTouch() does not exist in
+		// webkit yet… we must do the search ourselves...
+
+		i = -1;
+		l = touchList.length;
+
+		while (++i < l) {
+			if (touchList[i].identifier === id) {
+				return touchList[i];
+			}
+		}
+	}
+
+	function changedTouch(e, event) {
+		var touch = identifiedTouch(e.changedTouches, event.identifier);
+
+		// This isn't the touch you're looking for.
+		if (!touch) { return; }
+
+		// Chrome Android (at least) includes touches that have not
+		// changed in e.changedTouches. That's a bit annoying. Check
+		// that this touch has changed.
+		if (touch.pageX === event.pageX && touch.pageY === event.pageY) { return; }
+
+		return touch;
+	}
+
+
+	// Handlers that decide when the first movestart is triggered
+
+	function mousedown(e){
+		var data;
+
+		if (!isLeftButton(e)) { return; }
+
+		data = {
+			target: e.target,
+			startX: e.pageX,
+			startY: e.pageY,
+			timeStamp: e.timeStamp
+		};
+
+		add(document, mouseevents.move, mousemove, data);
+		add(document, mouseevents.cancel, mouseend, data);
+	}
+
+	function mousemove(e){
+		var data = e.data;
+
+		checkThreshold(e, data, e, removeMouse);
+	}
+
+	function mouseend(e) {
+		removeMouse();
+	}
+
+	function removeMouse() {
+		remove(document, mouseevents.move, mousemove);
+		remove(document, mouseevents.cancel, mouseend);
+	}
+
+	function touchstart(e) {
+		var touch, template;
+
+		// Don't get in the way of interaction with form elements.
+		if (ignoreTags[ e.target.tagName.toLowerCase() ]) { return; }
+
+		touch = e.changedTouches[0];
+
+		// iOS live updates the touch objects whereas Android gives us copies.
+		// That means we can't trust the touchstart object to stay the same,
+		// so we must copy the data. This object acts as a template for
+		// movestart, move and moveend event objects.
+		template = {
+			target: touch.target,
+			startX: touch.pageX,
+			startY: touch.pageY,
+			timeStamp: e.timeStamp,
+			identifier: touch.identifier
+		};
+
+		// Use the touch identifier as a namespace, so that we can later
+		// remove handlers pertaining only to this touch.
+		add(document, touchevents.move + '.' + touch.identifier, touchmove, template);
+		add(document, touchevents.cancel + '.' + touch.identifier, touchend, template);
+	}
+
+	function touchmove(e){
+		var data = e.data,
+		    touch = changedTouch(e, data);
+
+		if (!touch) { return; }
+
+		checkThreshold(e, data, touch, removeTouch);
+	}
+
+	function touchend(e) {
+		var template = e.data,
+		    touch = identifiedTouch(e.changedTouches, template.identifier);
+
+		if (!touch) { return; }
+
+		removeTouch(template.identifier);
+	}
+
+	function removeTouch(identifier) {
+		remove(document, '.' + identifier, touchmove);
+		remove(document, '.' + identifier, touchend);
+	}
+
+
+	// Logic for deciding when to trigger a movestart.
+
+	function checkThreshold(e, template, touch, fn) {
+		var distX = touch.pageX - template.startX,
+		    distY = touch.pageY - template.startY;
+
+		// Do nothing if the threshold has not been crossed.
+		if ((distX * distX) + (distY * distY) < (threshold * threshold)) { return; }
+
+		triggerStart(e, template, touch, distX, distY, fn);
+	}
+
+	function handled() {
+		// this._handled should return false once, and after return true.
+		this._handled = returnTrue;
+		return false;
+	}
+
+	function flagAsHandled(e) {
+		e._handled();
+	}
+
+	function triggerStart(e, template, touch, distX, distY, fn) {
+		var node = template.target,
+		    touches, time;
+
+		touches = e.targetTouches;
+		time = e.timeStamp - template.timeStamp;
+
+		// Create a movestart object with some special properties that
+		// are passed only to the movestart handlers.
+		template.type = 'movestart';
+		template.distX = distX;
+		template.distY = distY;
+		template.deltaX = distX;
+		template.deltaY = distY;
+		template.pageX = touch.pageX;
+		template.pageY = touch.pageY;
+		template.velocityX = distX / time;
+		template.velocityY = distY / time;
+		template.targetTouches = touches;
+		template.finger = touches ?
+			touches.length :
+			1 ;
+
+		// The _handled method is fired to tell the default movestart
+		// handler that one of the move events is bound.
+		template._handled = handled;
+
+		// Pass the touchmove event so it can be prevented if or when
+		// movestart is handled.
+		template._preventTouchmoveDefault = function() {
+			e.preventDefault();
+		};
+
+		// Trigger the movestart event.
+		trigger(template.target, template);
+
+		// Unbind handlers that tracked the touch or mouse up till now.
+		fn(template.identifier);
+	}
+
+
+	// Handlers that control what happens following a movestart
+
+	function activeMousemove(e) {
+		var event = e.data.event,
+		    timer = e.data.timer;
+
+		updateEvent(event, e, e.timeStamp, timer);
+	}
+
+	function activeMouseend(e) {
+		var event = e.data.event,
+		    timer = e.data.timer;
+
+		removeActiveMouse();
+
+		endEvent(event, timer, function() {
+			// Unbind the click suppressor, waiting until after mouseup
+			// has been handled.
+			setTimeout(function(){
+				remove(event.target, 'click', returnFalse);
+			}, 0);
+		});
+	}
+
+	function removeActiveMouse(event) {
+		remove(document, mouseevents.move, activeMousemove);
+		remove(document, mouseevents.end, activeMouseend);
+	}
+
+	function activeTouchmove(e) {
+		var event = e.data.event,
+		    timer = e.data.timer,
+		    touch = changedTouch(e, event);
+
+		if (!touch) { return; }
+
+		// Stop the interface from gesturing
+		e.preventDefault();
+
+		event.targetTouches = e.targetTouches;
+		updateEvent(event, touch, e.timeStamp, timer);
+	}
+
+	function activeTouchend(e) {
+		var event = e.data.event,
+		    timer = e.data.timer,
+		    touch = identifiedTouch(e.changedTouches, event.identifier);
+
+		// This isn't the touch you're looking for.
+		if (!touch) { return; }
+
+		removeActiveTouch(event);
+		endEvent(event, timer);
+	}
+
+	function removeActiveTouch(event) {
+		remove(document, '.' + event.identifier, activeTouchmove);
+		remove(document, '.' + event.identifier, activeTouchend);
+	}
+
+
+	// Logic for triggering move and moveend events
+
+	function updateEvent(event, touch, timeStamp, timer) {
+		var time = timeStamp - event.timeStamp;
+
+		event.type = 'move';
+		event.distX =  touch.pageX - event.startX;
+		event.distY =  touch.pageY - event.startY;
+		event.deltaX = touch.pageX - event.pageX;
+		event.deltaY = touch.pageY - event.pageY;
+
+		// Average the velocity of the last few events using a decay
+		// curve to even out spurious jumps in values.
+		event.velocityX = 0.3 * event.velocityX + 0.7 * event.deltaX / time;
+		event.velocityY = 0.3 * event.velocityY + 0.7 * event.deltaY / time;
+		event.pageX =  touch.pageX;
+		event.pageY =  touch.pageY;
+
+		timer.kick();
+	}
+
+	function endEvent(event, timer, fn) {
+		timer.end(function(){
+			event.type = 'moveend';
+
+			trigger(event.target, event);
+
+			return fn && fn();
+		});
+	}
+
+
+	// jQuery special event definition
+
+	function setup(data, namespaces, eventHandle) {
+		// Stop the node from being dragged
+		//add(this, 'dragstart.move drag.move', preventDefault);
+
+		// Prevent text selection and touch interface scrolling
+		//add(this, 'mousedown.move', preventIgnoreTags);
+
+		// Tell movestart default handler that we've handled this
+		add(this, 'movestart.move', flagAsHandled);
+
+		// Don't bind to the DOM. For speed.
+		return true;
+	}
+
+	function teardown(namespaces) {
+		remove(this, 'dragstart drag', preventDefault);
+		remove(this, 'mousedown touchstart', preventIgnoreTags);
+		remove(this, 'movestart', flagAsHandled);
+
+		// Don't bind to the DOM. For speed.
+		return true;
+	}
+
+	function addMethod(handleObj) {
+		// We're not interested in preventing defaults for handlers that
+		// come from internal move or moveend bindings
+		if (handleObj.namespace === "move" || handleObj.namespace === "moveend") {
+			return;
+		}
+
+		// Stop the node from being dragged
+		add(this, 'dragstart.' + handleObj.guid + ' drag.' + handleObj.guid, preventDefault, undefined, handleObj.selector);
+
+		// Prevent text selection and touch interface scrolling
+		add(this, 'mousedown.' + handleObj.guid, preventIgnoreTags, undefined, handleObj.selector);
+	}
+
+	function removeMethod(handleObj) {
+		if (handleObj.namespace === "move" || handleObj.namespace === "moveend") {
+			return;
+		}
+
+		remove(this, 'dragstart.' + handleObj.guid + ' drag.' + handleObj.guid);
+		remove(this, 'mousedown.' + handleObj.guid);
+	}
+
+	jQuery.event.special.movestart = {
+		setup: setup,
+		teardown: teardown,
+		add: addMethod,
+		remove: removeMethod,
+
+		_default: function(e) {
+			var template, data;
+
+			// If no move events were bound to any ancestors of this
+			// target, high tail it out of here.
+			if (!e._handled()) { return; }
+
+			template = {
+				target: e.target,
+				startX: e.startX,
+				startY: e.startY,
+				pageX: e.pageX,
+				pageY: e.pageY,
+				distX: e.distX,
+				distY: e.distY,
+				deltaX: e.deltaX,
+				deltaY: e.deltaY,
+				velocityX: e.velocityX,
+				velocityY: e.velocityY,
+				timeStamp: e.timeStamp,
+				identifier: e.identifier,
+				targetTouches: e.targetTouches,
+				finger: e.finger
+			};
+
+			data = {
+				event: template,
+				timer: new Timer(function(time){
+					trigger(e.target, template);
+				})
+			};
+
+			if (e.identifier === undefined) {
+				// We're dealing with a mouse
+				// Stop clicks from propagating during a move
+				add(e.target, 'click', returnFalse);
+				add(document, mouseevents.move, activeMousemove, data);
+				add(document, mouseevents.end, activeMouseend, data);
+			}
+			else {
+				// We're dealing with a touch. Stop touchmove doing
+				// anything defaulty.
+				e._preventTouchmoveDefault();
+				add(document, touchevents.move + '.' + e.identifier, activeTouchmove, data);
+				add(document, touchevents.end + '.' + e.identifier, activeTouchend, data);
+			}
+		}
+	};
+
+	jQuery.event.special.move = {
+		setup: function() {
+			// Bind a noop to movestart. Why? It's the movestart
+			// setup that decides whether other move events are fired.
+			add(this, 'movestart.move', jQuery.noop);
+		},
+
+		teardown: function() {
+			remove(this, 'movestart.move', jQuery.noop);
+		}
+	};
+
+	jQuery.event.special.moveend = {
+		setup: function() {
+			// Bind a noop to movestart. Why? It's the movestart
+			// setup that decides whether other move events are fired.
+			add(this, 'movestart.moveend', jQuery.noop);
+		},
+
+		teardown: function() {
+			remove(this, 'movestart.moveend', jQuery.noop);
+		}
+	};
+
+	add(document, 'mousedown.move', mousedown);
+	add(document, 'touchstart.move', touchstart);
+
+	// Make jQuery copy touch event properties over to the jQuery event
+	// object, if they are not already listed. But only do the ones we
+	// really need. IE7/8 do not have Array#indexOf(), but nor do they
+	// have touch events, so let's assume we can ignore them.
+	if (typeof Array.prototype.indexOf === 'function') {
+		(function(jQuery, undefined){
+			var props = ["changedTouches", "targetTouches"],
+			    l = props.length;
+
+			while (l--) {
+				if (jQuery.event.props.indexOf(props[l]) === -1) {
+					jQuery.event.props.push(props[l]);
+				}
+			}
+		})(jQuery);
+	};
+});
\ No newline at end of file
diff --git a/js/jquery.event.swipe.js b/js/jquery.event.swipe.js
new file mode 100644
index 000000000..9faa126ae
--- /dev/null
+++ b/js/jquery.event.swipe.js
@@ -0,0 +1,130 @@
+// jQuery.event.swipe
+// 0.5
+// Stephen Band
+
+// Dependencies
+// jQuery.event.move 1.2
+
+// One of swipeleft, swiperight, swipeup or swipedown is triggered on
+// moveend, when the move has covered a threshold ratio of the dimension
+// of the target node, or has gone really fast. Threshold and velocity
+// sensitivity changed with:
+//
+// jQuery.event.special.swipe.settings.threshold
+// jQuery.event.special.swipe.settings.sensitivity
+
+(function (module) {
+	if (typeof define === 'function' && define.amd) {
+		// AMD. Register as an anonymous module.
+		define(['jquery'], module);
+	} else {
+		// Browser globals
+		module(jQuery);
+	}
+})(function(jQuery, undefined){
+	var add = jQuery.event.add,
+
+	    remove = jQuery.event.remove,
+
+	    // Just sugar, so we can have arguments in the same order as
+	    // add and remove.
+	    trigger = function(node, type, data) {
+	    	jQuery.event.trigger(type, data, node);
+	    },
+
+	    settings = {
+	    	// Ratio of distance over target finger must travel to be
+	    	// considered a swipe.
+	    	threshold: 0.4,
+	    	// Faster fingers can travel shorter distances to be considered
+	    	// swipes. 'sensitivity' controls how much. Bigger is shorter.
+	    	sensitivity: 6
+	    };
+
+	function moveend(e) {
+		var w, h, event;
+
+		w = e.target.offsetWidth;
+		h = e.target.offsetHeight;
+
+		// Copy over some useful properties from the move event
+		event = {
+			distX: e.distX,
+			distY: e.distY,
+			velocityX: e.velocityX,
+			velocityY: e.velocityY,
+			finger: e.finger
+		};
+
+		// Find out which of the four directions was swiped
+		if (e.distX > e.distY) {
+			if (e.distX > -e.distY) {
+				if (e.distX/w > settings.threshold || e.velocityX * e.distX/w * settings.sensitivity > 1) {
+					event.type = 'swiperight';
+					trigger(e.currentTarget, event);
+				}
+			}
+			else {
+				if (-e.distY/h > settings.threshold || e.velocityY * e.distY/w * settings.sensitivity > 1) {
+					event.type = 'swipeup';
+					trigger(e.currentTarget, event);
+				}
+			}
+		}
+		else {
+			if (e.distX > -e.distY) {
+				if (e.distY/h > settings.threshold || e.velocityY * e.distY/w * settings.sensitivity > 1) {
+					event.type = 'swipedown';
+					trigger(e.currentTarget, event);
+				}
+			}
+			else {
+				if (-e.distX/w > settings.threshold || e.velocityX * e.distX/w * settings.sensitivity > 1) {
+					event.type = 'swipeleft';
+					trigger(e.currentTarget, event);
+				}
+			}
+		}
+	}
+
+	function getData(node) {
+		var data = jQuery.data(node, 'event_swipe');
+
+		if (!data) {
+			data = { count: 0 };
+			jQuery.data(node, 'event_swipe', data);
+		}
+
+		return data;
+	}
+
+	jQuery.event.special.swipe =
+	jQuery.event.special.swipeleft =
+	jQuery.event.special.swiperight =
+	jQuery.event.special.swipeup =
+	jQuery.event.special.swipedown = {
+		setup: function( data, namespaces, eventHandle ) {
+			var data = getData(this);
+
+			// If another swipe event is already setup, don't setup again.
+			if (data.count++ > 0) { return; }
+
+			add(this, 'moveend', moveend);
+
+			return true;
+		},
+
+		teardown: function() {
+			var data = getData(this);
+
+			// If another swipe event is still setup, don't teardown.
+			if (--data.count > 0) { return; }
+
+			remove(this, 'moveend', moveend);
+
+			return true;
+		},
+
+		settings: settings
+	};
+});
\ No newline at end of file
diff --git a/js/jquery.slideview.js b/js/jquery.slideview.js
new file mode 100644
index 000000000..2dd825899
--- /dev/null
+++ b/js/jquery.slideview.js
@@ -0,0 +1,128 @@
+(function($) {
+    $.fn.slideSwipe = function(option)
+    {
+        var cfg = {
+                element: "section",
+                sidx_class: "sidx",
+                slide_class: "sidx_slide",
+                active_class: "slide_class",
+                duration: 300
+            };
+
+        if(typeof option == "object")
+            cfg = $.extend( cfg, option );
+
+        this.addClass(cfg.sidx_class);
+        var $this = this;
+        var $slides = this.find(cfg.element);
+        $slides.addClass(cfg.slide_class);
+
+        var height;
+        var width = $(window).width();
+        var count = $slides.size();
+        var idx = next = 0;
+
+        function swipe_init()
+        {
+            idx = $slides.index($slides.filter("."+cfg.active_class));
+            if(idx == -1)
+                idx = 0;
+
+            width = $(window).width();
+            $slides.eq(idx).addClass(cfg.active_class);
+            $slides.not("."+cfg.active_class).css("left", width+"px");
+
+            height = $slides.eq(idx).height();
+            $this.height(height);
+        }
+
+        function swipe_left()
+        {
+            if(check_animated())
+                return;
+
+            idx = $slides.index($slides.filter("."+cfg.active_class));
+            next = (idx + 1) % count;
+
+            $slides.not("."+cfg.active_class).css("left", width+"px");
+
+            width = $(window).width();
+            height = $slides.eq(next).height();
+            $this.height(height);
+
+            $slides.eq(idx).animate(
+                { left: "-="+width }, cfg.duration,
+                function() {
+                    $slides.eq(idx).removeClass(cfg.active_class);
+                }
+            );
+
+            $slides.eq(next).animate(
+                { left: "-="+width }, cfg.duration,
+                function() {
+                    $slides.eq(next).addClass(cfg.active_class);
+                }
+            );
+        }
+
+        function swipe_right()
+        {
+            if(check_animated())
+                return;
+
+            idx = $slides.index($slides.filter("."+cfg.active_class));
+            next = idx - 1
+
+            $slides.not("."+cfg.active_class).css("left", "-"+width+"px");
+
+            width = $(window).width();
+            height = $slides.eq(next).height();
+            $this.height(height);
+
+            $slides.eq(idx).animate(
+                { left: "+="+width }, cfg.duration,
+                function() {
+                    $slides.eq(idx).removeClass(cfg.active_class);
+                }
+            );
+
+            $slides.eq(next).animate(
+                { left: "+="+width }, cfg.duration,
+                function() {
+                    $slides.eq(next).addClass(cfg.active_class);
+                }
+            );
+        }
+
+        function check_animated()
+        {
+            if($slides.filter(":animated").size())
+                return true;
+        }
+
+        $(window).on("load", function(e) {
+            swipe_init();
+        });
+
+        $(window).on("resize", function(e) {
+            swipe_init();
+        });
+
+        // swipe event
+        $this
+         .on("swipeleft", function(e) {
+             swipe_left();
+         })
+         .on("swiperight", function(e) {
+             swipe_right();
+        });
+
+        // scroll event enable
+        $(window).on("movestart", function(e) {
+            if ((e.distX > e.distY && e.distX < -e.distY) ||
+            (e.distX < e.distY && e.distX > -e.distY)) {
+                e.preventDefault();
+            }
+        });
+    }
+}(jQuery));
\ No newline at end of file
diff --git a/mobile/shop/index.php b/mobile/shop/index.php
index a09af5efa..8d69f5350 100644
--- a/mobile/shop/index.php
+++ b/mobile/shop/index.php
@@ -6,11 +6,15 @@ define("_INDEX_", TRUE);
 include_once(G5_MSHOP_PATH.'/shop.head.php');
 ?>
 
+<script src="<?php echo G5_JS_URL; ?>/jquery.event.move.js"></script>
+<script src="<?php echo G5_JS_URL; ?>/jquery.event.swipe.js"></script>
+<script src="<?php echo G5_JS_URL ?>/jquery.slideview.js"></script>
+
 <div id="sidx">
 
     <section class="sct_wrap">
         <header>
-            <h2><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=3">최신상품</a></h2>
+            <h2>최신상품</h2>
             <p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 최신상품 모음</p>
         </header>
         <?php
@@ -25,11 +29,12 @@ include_once(G5_MSHOP_PATH.'/shop.head.php');
         $list->set_view('sns', true);
         echo $list->run();
         ?>
+        <div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=3">더 보기</a></div>
     </section>
 
     <section class="sct_wrap">
         <header>
-            <h2><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=1">히트상품</a></h2>
+            <h2>히트상품</h2>
             <p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 히트상품 모음</p>
         </header>
         <?php
@@ -44,11 +49,12 @@ include_once(G5_MSHOP_PATH.'/shop.head.php');
         $list->set_view('sns', true);
         echo $list->run();
         ?>
+        <div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=1">더 보기</a></div>
     </section>
 
     <section class="sct_wrap">
         <header>
-            <h2><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=2">추천상품</a></h2>
+            <h2>추천상품</h2>
             <p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 추천상품 모음</p>
         </header>
         <?php
@@ -63,11 +69,12 @@ include_once(G5_MSHOP_PATH.'/shop.head.php');
         $list->set_view('sns', true);
         echo $list->run();
         ?>
+        <div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=2">더 보기</a></div>
     </section>
 
     <section class="sct_wrap">
         <header>
-            <h2><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=4">인기상품</a></h2>
+            <h2>인기상품</h2>
             <p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 인기상품 모음</p>
         </header>
         <?php
@@ -82,11 +89,12 @@ include_once(G5_MSHOP_PATH.'/shop.head.php');
         $list->set_view('sns', true);
         echo $list->run();
         ?>
+        <div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=4">더 보기</a></div>
     </section>
 
     <section class="sct_wrap">
         <header>
-            <h2><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=5">할인상품</a></h2>
+            <h2>할인상품</h2>
             <p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 할인상품 모음</p>
         </header>
         <?php
@@ -101,10 +109,25 @@ include_once(G5_MSHOP_PATH.'/shop.head.php');
         $list->set_view('sns', true);
         echo $list->run();
         ?>
+        <div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=5">더 보기</a></div>
     </section>
 
 </div>
 
+<script>
+$(function() {
+    $("#sidx").slideSwipe(
+        {
+            element: "section.sct_wrap",
+            sidx_class: "sidx",
+            slide_class: "sidx_slide",
+            active_class: "slide_class",
+            duration: 300
+        }
+    );
+});
+</script>
+
 <?php
 include_once(G5_MSHOP_PATH.'/shop.tail.php');
 ?>
\ No newline at end of file
diff --git a/mobile/skin/shop/basic/main.10.skin.php b/mobile/skin/shop/basic/main.10.skin.php
index 7b7a45fcb..2054cf7b4 100644
--- a/mobile/skin/shop/basic/main.10.skin.php
+++ b/mobile/skin/shop/basic/main.10.skin.php
@@ -73,6 +73,6 @@ if($i == 0) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\
 
 <script>
 $(function() {
-    $(".sct_wrap").fancyList("li.sct_li", "sct_clear");
+    $("ul.sct_wrap").fancyList("li.sct_li", "sct_clear");
 });
 </script>
\ No newline at end of file