Skip to content

Instantly share code, notes, and snippets.

@jimfleming
Created August 11, 2010 15:49
Show Gist options
  • Save jimfleming/519196 to your computer and use it in GitHub Desktop.
Save jimfleming/519196 to your computer and use it in GitHub Desktop.
Similar to a slideshow but scrolls horizontally with left and right navigation
(function($) {
$.fn.scroller = function(settings) {
var config = { 'delay' : 4000, 'prev_selector' : '#prev', 'next_selector' : '#next', 'should_loop' : false };
if (settings) $.extend(config, settings);
this.each(function() {
var $this = $(this);
var current = 0;
var $prev = $(config.prev_selector);
var $next = $(config.next_selector);
var $children = $this.children();
var children_count = $children.length;
var child_width = $children.outerWidth(true);
var progress = function(reverse) {
current = (reverse ? (--current) : (++current)) % children_count;
if (current < 0) current = children_count - 1;
$this.animate({ 'left' : -1 * current * child_width });
};
if (config.should_loop)
var interval = setInterval(progress, config.delay);
$next.click(function() {
progress();
if (config.should_loop) {
clearInterval(interval);
setTimeout(function() { interval = setInterval(progress, config.delay) }, config.delay * 2);
}
});
$prev.click(function() {
progress(true);
if (config.should_loop) {
clearInterval(interval);
setTimeout(function() { interval = setInterval(progress, config.delay) }, config.delay * 2);
}
});
});
return this;
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment