$(document).ready(function(){
//slide샘플
var testNum = 0,
testWidth = $("div.slider ul li").width(),
testLength = $("div.slider ul li").length,
totalWidth = testWidth * testLength;
var guideWidth = $("div.slider div").outerWidth();
if(testLength > 2){
$("div.slider a.left").show();
}
$("div.slider div ul").css("width",totalWidth);
$("div.slider a.left").click(function(){
testNum--;
console.log(testNum);
if (testNum <= "-"+(testLength-1)){
testNum = -(testLength-2);
alert("task의 끝입니다!");
} else {
$("div.slider div ul").animate({left:'-='+testWidth},100);
$("div.slider a.right").show();
}
});
$("div.slider a.right").click(function(){
testNum++;
console.log(testNum);
if (testNum >= 1){
testNum = 0;
alert("task의 시작입니다!");
} else {
$("div.slider div ul").animate({left:'+='+testWidth},100);
$("div.slider a.left").show();
}
});
});
-----------------------------------------------------------------------------
<style type="text/css">
div,ul,li,a {padding:0;margin:0;list-style:none;}
div.slider {position:relative;width:700px;margin:0 auto;}
div.slider > a {display:none;position:absolute;top:20px;padding:10px;border:1px solid #000;background:#eee;}
div.slider a.left {left:0;}
div.slider a.right {right:0;}
div.slider div {overflow:hidden;width:500px;height:60px;padding:20px;margin:0 auto;border:1px solid #000;}
div.slider div ul {position:relative;left:0;}
div.slider div ul:after {content:"";display:block;clear:both;}
div.slider div ul li {float:left;width:260px;height:100px;}
div.slider div ul li:first-child {border-left:0;}
div.slider div ul li a {display:block;width:240px;height:35px;padding:5px;border:1px solid red;}
</style>
-----------------------------------------------------------------------------
<div class="slider">
<a href="#none" class="left">완쪽</a>
<div>
<ul>
<li><a href="#none">화면설계협의1</a></li>
<li><a href="#none">화면설계협의2</a></li>
<li><a href="#none">화면설계협의3</a></li>
<li><a href="#none">화면설계협의4</a></li>
<li><a href="#none">화면설계협의5</a></li>
</ul>
</div>
<a href="#none" class="right">오른쪽</a>
</div>