Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Accessible Sider
function Slider() {
// private variables
var container = slider.addClass('js');
var ul = container.find('ul');
var lis = ul.find('li');
var btnNext = null;
var btnPrev = null;
var currentSlide = 0;
// public variables
this.duration = 300;
// private methods
function slideTo(index) {
ul.stop();
ul.animate({ left: '-' + (index * lis.outerWidth(true)) + 'px' }, this.duration);
currentSlide = index;
}
// public methods
this.currentSlide = function() {
return currentSlide;
}
this.focus = function() {
container.focus();
}
this.slideNext = function() {
if (++currentSlide >= lis.length) currentSlide = 0;
slideTo(currentSlide);
}
this.slidePrev = function() {
if (--currentSlide < 0) currentSlide = lis.length - 1;
slideTo(currentSlide);
}
// initialization
slider.data('slider', this);
container.append('<a href="#" class="prev" /><a href="#" class="next" />');
btnNext = container.find('a.next').click(function() {
s.slideNext();
return false;
});
btnPrev = container.find('a.prev').click(function() {
s.slidePrev();
return false;
});
container.keydown(function(e) {
if (e.which == 39) {
s.slideNext();
} else if (e.which == 37) {
s.slidePrev();
}
});
this.focus();
}
jQuery(function() {
var slider = new Slider($('#slider'));
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slider</title>
<link rel="stylesheet" href="style.css" media="all" />
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" charset="utf-8" src="func.js" defer="defer"></script>
</head>
<body>
<div id="slider" tabindex="0">
<ul>
<li><img src="images/slide-1.jpg" alt="" /></li>
<li><img src="images/slide-2.jpg" alt="" /></li>
<li><img src="images/slide-3.jpg" alt="" /></li>
<li><img src="images/slide-4.jpg" alt="" /></li>
<li><img src="images/slide-5.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
* { margin: 0; padding: 0; }
body { padding: 20px 0; background: #333; color: #FFF; font: normal 12px Arial, Helvetica, sans-serif; }
#slider { position: relative; width: 960px; margin: 0 auto; border: 2px solid #000; }
#slider:focus { outline: none; }
#slider ul { width: 100%; list-style-type: none; overflow: hidden; }
#slider ul li { display: inline; float: left; }
#slider li img { float: left; }
#slider.js { height: 540px; overflow: hidden; }
#slider.js:focus { border-color: #666; }
#slider.js ul { position: absolute; width: 50000em; height: 100%; }
#slider.js ul li { width: 960px; height: 100%; }
#slider.js a { position: absolute; top: 250px; z-index: 10; width: 20px; height: 40px; background: rgba(255, 255, 255, 0.2); }
#slider.js .next { right: 10px; }
#slider.js .prev { left: 10px; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment