Skip to content

Instantly share code, notes, and snippets.

@lvivski

lvivski/slider.css

Created February 6, 2011 18:58
Show Gist options
  • Save lvivski/813608 to your computer and use it in GitHub Desktop.
Save lvivski/813608 to your computer and use it in GitHub Desktop.
Download ZIP
really simple js slider for lists
Raw
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:"↓";
}
Raw
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>
Raw
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment