jquery tools

http://flowplayer.org/tools/demos/index.html

슬라이딩 에 유용한 jquery 플러그인 기능이 많은 만큼 조금 헷갈린다

아쉬운점도 눈에 띠고....

스크립트는 대략적으로 이렇게 쓰인다.

원하는 옵션을 주어서 필요한것을 주게 된다.

$(document).ready(function() {
	$("#chained").scrollable({circular: true, mousewheel: false , getIndex: 1}).autoscroll({interval: 3000, autoplay: true}).navigator();;
});

Css 사용법

사이트 예제는 이것저것 많이 들어가있다.. 100%는 아니지만 쓸모없는건 떼고..

대부분 기본적인 기능만 필요로 하는것 같다.

.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 199px;
	height:75px;
	padding-top:10px;
}

.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

.items div {
	float:left;
	width:199px;
}

/* single scrollable item */
.scrollable img {
	float:left;
	width:199px;
	height:75px;
}

/* active item */
.scrollable img {
	width:199px;
	margin:0px 10px 0px 0px;	
}
 

.navi {
position:absolute;
right:0;
top:5px;
height: 20px;
/*margin-left: 328px;*/
width: 70px;
}

.navi a {
background: url(http://static.flowplayer.org/tools/img/scrollable/arrow/navigator.png) no-repeat 0px 0px;
display: block;
float: left;
font-size: 1px;
height: 8px;
margin: 2px;
width: 8px;
}

.navi a.active {
background-position: 0px -16px;
}


a.browse {
	background:url(img/main/prebtn.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:10px 10px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right {position:absolute;left:0px;top:0; background:url(img/main/prebtn.png) no-repeat; clear:right; width:21px;height:87px;}

/* left */
a.left {position:absolute;right:0px;top:0;background:url(img/main/nextbtn.png) no-repeat; clear:right; width:21px;height:87px;}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 

대충이렇게 쓰인다 navi 부분도 있고 좌우 버튼들도 있고

입맛에 따라 쓰면...

상세는 사이트 참조~~~~