lvivski/slider.css

## slider.css
.list {
    overflow:hidden;
    height:100%;
    }

.control {
    position:absolute;
    display:block;
    width:35px;
    height:35px;
    text-decoration:none;
    color:#333;
    background: #e7e7da;
    margin:0 auto;
    text-align:center;
    font:bold 1.2em/2.2em sans-serif;
    -webkit-transition-property:background, color;
    -webkit-transition-duration:.3s, .3s;
    }
    .control:hover {
        background: #ddddc4;
        }

.inactive .control {
    color:#999;
    background:#f4f4f2;
    }
    .inactive .control:hover {
        background:none;
        cursor:default;
    }

.horizontal .control {
    top:0;
    width:35px;
    height:100%;
    line-height:11em;
    }
    .horizontal .prev .control {
        left:0;
        }
        .horizontal .prev .control:after {
            content:"←";
            }
    .horizontal .next .control {
        right:0;
        }
        .horizontal .next .control:after {
            content:"→";
            }

.vertical .control {
    left:0;
    width:100px;
    height:35px;
    }
    .vertical .prev .control {
        top:0;
        }
        .vertical .prev .control:after {
            content:"↑";
        }
    .vertical .next .control {
        bottom:0;
        }
        .vertical .next .control:after {
            content:"↓";
        }

## slider.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#slider").slider("vertical");
        });
    </script>
    <style>
        * {
            margin:0;
            padding:0;
            }
        ul {
            list-style:none;
            height:100px;
            }
        li {
            display:block;
            height:25px;
            background:#face8D;
        }
        #slider {
            height: 100px;
            }
    </style>
</head>
<body>
<div id="slider">
   <div class="list">
        <ul>
            <li>el1</li>
            <li>el2</li>
            <li>el3</li>
            <li>el4</li>
            <li>el6</li>
            <li>el7</li>
            <li>el8</li>
            <li>el8</li>
            <li>el10</li>
            <li>el11</li>
            <li>el12</li>
            <li>el13</li>
        </ul>
    </div>
</div>
</body>
</html>

## slider.js
(function($){
    $.fn.slider = function(type, listSelector) {
        var list = this.find(listSelector || ".list"),
            visibleSize = type == 'vertical' ? list.height() : list.width(),
            ul = list.children('ul'),
            innerSize = type == 'vertical' ? ul.height() : ul.width(),
            prev = $('<div class="prev inactive"><a href="#" class="control"></a></div>'),
            next = $('<div class="next inactive"><a href="#" class="control"></a></div>'),
            scrollable = false,
            step = type == 'vertical' ? ul.children().height() : ul.children().width(),
            scrollType = 'scroll' + (type == 'vertical' ? 'Top' : 'Left'),
            o = {};

        this.addClass(type);
        this.prepend(prev);
        this.append(next);

        if (innerSize > visibleSize) {
            scrollable = true;
            next.removeClass('inactive');
        }

        prev.bind('click', function(e){
            if (!scrollable) return false;
            e.preventDefault();

            o[scrollType] = '-='+step;

            list.animate(o, 200);
            if ((list[scrollType]() - step) <= 0) {
                    prev.addClass('inactive');
            }
            next.removeClass('inactive');

        });
        next.bind('click', function(e){
            if (!scrollable) return false;
            e.preventDefault();

            o[scrollType] = '+='+step;

            list.animate(o, 200);
            if ((list[scrollType]() + visibleSize + step) >= innerSize) {
                next.addClass('inactive');
            }
            prev.removeClass('inactive');
        });
    }
})(jQuery);
	.list {
	overflow:hidden;
	height:100%;
	}

	.control {
	position:absolute;
	display:block;
	width:35px;
	height:35px;
	text-decoration:none;
	color:#333;
	background: #e7e7da;
	margin:0 auto;
	text-align:center;
	font:bold 1.2em/2.2em sans-serif;
	-webkit-transition-property:background, color;
	-webkit-transition-duration:.3s, .3s;
	}
	.control:hover {
	background: #ddddc4;
	}

	.inactive .control {
	color:#999;
	background:#f4f4f2;
	}
	.inactive .control:hover {
	background:none;
	cursor:default;
	}

	.horizontal .control {
	top:0;
	width:35px;
	height:100%;
	line-height:11em;
	}
	.horizontal .prev .control {
	left:0;
	}
	.horizontal .prev .control:after {
	content:"←";
	}
	.horizontal .next .control {
	right:0;
	}
	.horizontal .next .control:after {
	content:"→";
	}

	.vertical .control {
	left:0;
	width:100px;
	height:35px;
	}
	.vertical .prev .control {
	top:0;
	}
	.vertical .prev .control:after {
	content:"↑";
	}
	.vertical .next .control {
	bottom:0;
	}
	.vertical .next .control:after {
	content:"↓";
	}
	<!DOCTYPE HTML>
	<html lang="en-US">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
	<script type="text/javascript">
	$(function(){
	$("#slider").slider("vertical");
	});
	</script>
	<style>
	* {
	margin:0;
	padding:0;
	}
	ul {
	list-style:none;
	height:100px;
	}
	li {
	display:block;
	height:25px;
	background:#face8D;
	}
	#slider {
	height: 100px;
	}
	</style>
	</head>
	<body>
	<div id="slider">
	<div class="list">
	<ul>
	<li>el1</li>
	<li>el2</li>
	<li>el3</li>
	<li>el4</li>
	<li>el6</li>
	<li>el7</li>
	<li>el8</li>
	<li>el8</li>
	<li>el10</li>
	<li>el11</li>
	<li>el12</li>
	<li>el13</li>
	</ul>
	</div>
	</div>
	</body>
	</html>
	(function($){
	$.fn.slider = function(type, listSelector) {
	var list = this.find(listSelector \|\| ".list"),
	visibleSize = type == 'vertical' ? list.height() : list.width(),
	ul = list.children('ul'),
	innerSize = type == 'vertical' ? ul.height() : ul.width(),
	prev = $('<div class="prev inactive"><a href="#" class="control"></a></div>'),
	next = $('<div class="next inactive"><a href="#" class="control"></a></div>'),
	scrollable = false,
	step = type == 'vertical' ? ul.children().height() : ul.children().width(),
	scrollType = 'scroll' + (type == 'vertical' ? 'Top' : 'Left'),
	o = {};

	this.addClass(type);
	this.prepend(prev);
	this.append(next);

	if (innerSize > visibleSize) {
	scrollable = true;
	next.removeClass('inactive');
	}

	prev.bind('click', function(e){
	if (!scrollable) return false;
	e.preventDefault();

	o[scrollType] = '-='+step;

	list.animate(o, 200);
	if ((list[scrollType]() - step) <= 0) {
	prev.addClass('inactive');
	}
	next.removeClass('inactive');

	});
	next.bind('click', function(e){
	if (!scrollable) return false;
	e.preventDefault();

	o[scrollType] = '+='+step;

	list.animate(o, 200);
	if ((list[scrollType]() + visibleSize + step) >= innerSize) {
	next.addClass('inactive');
	}
	prev.removeClass('inactive');
	});
	}
	})(jQuery);