Skip to content

Instantly share code, notes, and snippets.

@Haraldson
Created February 24, 2013 22:35
Show Gist options
  • Save Haraldson/5026030 to your computer and use it in GitHub Desktop.
Save Haraldson/5026030 to your computer and use it in GitHub Desktop.
var Slider = function(args)
{
this.initialize(args);
}
Slider.prototype = {
initialize: function(args)
{
this.setSliderWidth(args);
this.slideAutoRotate;
if(args.naviButtons.show) {
this.addNaviButtons(args, this.slideAutoRotate);
}
if(args.rotate.auto)
{
this.autoRotate(args, this.slideAutoRotate);
}
},
slidePrev: function(args)
{
if(!$(args.selector.wrap + ' ' + args.selector.slide).is(':animated'))
{
var leftLimit = (this.getNumberOfItems(args) - 1) * this.getItemWidth(args);
var leftPos = Math.abs($(args.selector.wrap + ' ' + args.selector.slide).css('left').replace(/px/g, ''));
if(leftPos <= 0)
{
if(args.wrapAround)
{
$(args.selector.wrap + ' ' + args.selector.slide).animate(
{
left: -leftLimit + 'px'
},
{
queue: true,
duration: args.wrapAroundSpeed
});
}
}
else
{
var toRight = Math.abs(leftPos - this.getItemWidth(args));
$(args.selector.wrap + ' ' + args.selector.slide).animate(
{
left: -toRight + 'px'
},
{
queue: true,
duration: args.speed
});
}
}
},
slideNext: function(args)
{
if(!$(args.selector.wrap + ' ' + args.selector.slide).is(':animated'))
{
var leftLimit = (this.getNumberOfItems(args) - 1) * this.getItemWidth(args);
var leftPos = Math.abs($(args.selector.wrap + ' ' + args.selector.slide).css('left').replace(/px/g, ''));
if(leftPos >= leftLimit)
{
if(args.wrapAround)
{
$(args.selector.wrap + ' ' + args.selector.slide).animate(
{
left: '0px'
},
{
queue: false,
duration: args.wrapAroundSpeed
});
}
}
else
{
var toLeft = -leftPos - this.getItemWidth(args);
$(args.selector.wrap + ' ' + args.selector.slide).animate(
{
left: toLeft + 'px'
},
{
queue: false,
duration: args.speed
});
}
}
},
autoRotate: function(args)
{
var self = this;
$(args.selector.wrap + ' ' + args.selector.slide).everyTime(args.rotate.interval, 'slideAutoRotate', function(){ self.slideNext(args); });
if(args.rotate.pauseOnMouseOver)
{
$(args.selector.wrap + ' ' + args.selector.slide).mouseleave(function()
{
$(this).everyTime(args.rotate.interval, 'slideAutoRotate', function(){ self.slideNext(args); });
});
$(args.selector.wrap + ' ' + args.selector.slide).mouseenter(function()
{
$(this).stopTime('slideAutoRotate');
});
}
},
stopAutoRotate: function(args)
{
if(args.rotate.auto && args.rotate.stopAutoOnUserClick)
{
$(args.selector.wrap + ' ' + args.selector.slide).stopTime('slideAutoRotate');
$(args.selector.wrap + ' ' + args.selector.slide).unbind('mouseleave');
}
},
setSliderWidth: function(args)
{
var self = this;
this.totalWidth = this.getNumberOfItems(args) * this.getItemWidth(args);
$(args.selector.wrap + ' ' + args.selector.slide).css('width', self.totalWidth + 'px')
},
getNumberOfItems: function(args)
{
return $(args.selector.wrap + ' ' + args.selector.item).size();
},
getItemWidth: function(args)
{
return $(args.selector.wrap + ' ' + args.selector.item).eq(0).width();
},
addNaviButtons: function(args)
{
var self = this;
this.args = args;
var naviButtons = '<a href="#" onclick="return false;" class="prev">' + args.naviButtons.prevText + '</a><a href="#" onclick="return false;" class="next">' + args.naviButtons.nextText + '</a>';
$(args.selector.wrap + ' ' + args.selector.slide).after(naviButtons);
$(args.selector.wrap + ' .prev').click(function()
{
self.slidePrev(self.args);
self.stopAutoRotate(self.args);
});
$(args.selector.wrap + ' .next').click(function()
{
self.slideNext(self.args);
self.stopAutoRotate(self.args);
});
if($(args.selector.wrap + ' .prev').css('opacity') < 1.0)
{
var originalOpacity = $(args.selector.wrap + ' .prev').css('opacity');
$(args.selector.wrap).mouseenter(function()
{
$(args.selector.wrap + ' .prev, ' + args.selector.wrap + ' .next').animate(
{
opacity: 1.0,
},
{
queue: false,
duration: 200
});
});
$(args.selector.wrap).mouseleave(function()
{
$(args.selector.wrap + ' .prev, ' + args.selector.wrap + ' .next').animate(
{
opacity: originalOpacity,
},
{
queue: false,
duration: 400
});
});
}
}
};
$(document).ready(function()
{
var CUSTOMERSlider = new Slider(
{
selector: {
wrap: '.slide-wrap',
slide: '.slider',
item: '.item'
},
naviButtons: {
show: true,
prevText: '« Forrige',
nextText: 'Neste »'
},
rotate: {
auto: true,
interval: 4000,
pauseOnMouseOver: true,
stopAutoOnUserClick: true
},
speed: 400,
wrapAround: true,
wrapAroundSpeed: 200
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment