Skip to content

Instantly share code, notes, and snippets.

@AstDerek
Last active December 17, 2015 14:19
Show Gist options
  • Save AstDerek/5623600 to your computer and use it in GitHub Desktop.
Save AstDerek/5623600 to your computer and use it in GitHub Desktop.
Simple custom slider
(function($){
var plugin_name = 'customSlider',
methods = {
init: function (options) {
return this.each(function(){
var slider = $(this),
data = slider.data(plugin_name),
wrapper, menu, slides, current, width,
current_class;
if (data) {
return true;
}
var settings = {
menu: slider.find('.' + plugin_name + '-menu'),
wrapper: slider.find('form:first'),
speed: 'slow',
beforeSlide: function(current,slider,slides,menu,buttons){},
afterSlide: function(current,slider,slides,menu,buttons){},
current_class: 'current'
};
if (options) {
$.extend(settings,options);
}
settings.buttons = $.isPlainObject(settings.buttons || false) ? settings.buttons : {
all: settings.menu.find('a:not(.prev,.next,.first,.last)'),
prev: settings.menu.find('a.prev'),
next: settings.menu.find('a.next'),
first: settings.menu.find('a.first'),
last: settings.menu.find('a.last')
};
slider
.data(plugin_name,settings)
.css({ overflow: 'hidden' });
current_class = settings.current_class;
menu = settings.menu;
wrapper = settings.wrapper;
slides = wrapper.children();
current = slides.eq(0);
width = slider.width();
slides.height(1);
current.addClass(current_class).height('auto');
slides.width(width);
wrapper.width(slides.length*width + width);
wrapper.css({ 'margin-left': slider.offset().left - current.offset().left });
function slide_to (n) {
var current = slides.filter('.' + current_class),
target = slides.eq(n),
height = 1, continue_sliding = true;
if (
!current.length ||
!target.length ||
wrapper.is('.animating') ||
(current.index() == n) ||
(n < 0) ||
(n >= slides.length)
) {
return;
}
continue_sliding = (settings.beforeSlide || function(){ return true; })(current,slider,slides,menu,settings.buttons);
if (continue_sliding === false) {
return;
}
target.height('auto');
height = target.height();
target.height(1);
target.animate({ height: height },settings.speed);
wrapper.addClass('animating').animate(
{ 'margin-left': -width*n },
settings.speed,
function(){
current.animate({ height: 1 },settings.speed);
wrapper.removeClass('animating');
current.removeClass(current_class);
target.addClass(current_class);
(settings.afterSlide || function(){})(current,slider,slides,menu,settings.buttons);
}
);
}
settings.buttons.prev.click(function(e){
e.preventDefault();
slide_to(slides.filter(current_class).index() - 1);
return false;
});
settings.buttons.next.click(function(e){
e.preventDefault();
slide_to(slides.filter(current_class).index() + 1);
return false;
});
settings.buttons.first.click(function(e){
e.preventDefault();
slide_to(0);
return false;
});
settings.buttons.last.click(function(e){
e.preventDefault();
slide_to(slides.length - 1);
return false;
});
settings.buttons.all.click(function(e){
e.preventDefault();
slide_to(settings.buttons.all.index(this));
return false;
});
});
}
};
$.fn[plugin_name] = function (method) {
if (methods[method]) {
return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
}
else if (typeof method === 'object' || ! method) {
return methods.init.apply(this,arguments);
}
else {
$.error('Method ' + method + ' does not exist on jQuery.' + plugin_name);
}
};
}(jQuery));
$('#pieces').customSlider({
menu: $('#piecesNav'),
wrapper: $('#pieces form'),
beforeSlide: function(current,slider,slides,menu,buttons){
console.log('Validate the following fields:');
console.log(current.find('input, select, textarea'));
console.log('Menu buttons:');
console.log(buttons);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment