터치 슬라이드, 플리킹 , 스와이프 , flicking , swipe , touch slides

차근차근/JQuery Ajax Jstl

터치 슬라이드, 플리킹 , 스와이프 , flicking , swipe , touch slides

예쁜꽃이피었으면 2014. 9. 24. 16:43

안드로이드 웹뷰에서 이미지를 슬라이드 하고싶었다.

어느 천사분께서 소스를 올려주셔서

겨우 해결할 수 있었다.

file:///C:/Users/hyunok/Downloads/touchSlider.html <- 여기에서 소스보기해서 저장한 파일

flick_common.css

jquery.min.js

min.js


	<!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>

천사분의 소스를 알 수 있었던 곳 :

http://blog.naver.com/PostView.nhn?blogId=kes3583&logNo=90168914660

저작자표시 비영리

'차근차근 > JQuery Ajax Jstl' 카테고리의 다른 글

jquery 모바일 이미지 슬라이드 (0)	2014.09.24
carousel(슬라이드 갤러리) 반응형 웹 적용하기 (0)	2014.09.24
jquery 모바일 이미지 슬라이드 (0)	2014.09.24
[모음] jQuery Slide 슬라이드/스크롤 (0)	2014.09.24
jquery blockui no background (0)	2014.09.17

현재글터치 슬라이드, 플리킹 , 스와이프 , flicking , swipe , touch slides

개인 공부를 위한 블로그입니다.

10951, docker, Gunicorn, 패스트캠퍼스, 인증문자, AWS, 10953, vuejs, 패스트캠퍼스후기, 직장인인강, Django, 한 번에 끝내는 코딩테스트 369 Java편 초격차 패키지 Online., ubuntu, 패캠챌린지, 직장인자기계발, 10952, nginx, 백준, 자바, MYSQL,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

내 인생에도 예쁜 꽃이 피었으면 좋겠다

터치 슬라이드, 플리킹 , 스와이프 , flicking , swipe , touch slides

'차근차근 > JQuery Ajax Jstl' 카테고리의 다른 글

'차근차근/JQuery Ajax Jstl'의 다른글

티스토리툴바

터치 슬라이드, 플리킹 , 스와이프 , flicking , swipe , touch slides

'차근차근 > JQuery Ajax Jstl' 카테고리의 다른 글

'차근차근/JQuery Ajax Jstl'의 다른글

관련글

티스토리툴바