Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // If JavaScript is disabled it will look more user friendly
- // and no matter how many images we add, the code will work properly
- (function(){
- var container = $('div.slider').css('overflow', 'hidden').children('ul'),
- slider = new Slider(container, $('#slider-nav'));
- slider.nav.show().find('button').on('click', function(){
- slider.setCoordinates($(this).data('dir'));
- slider.transition();
- });
- setInterval(function() {
- slider.setCoordinates('next');
- slider.transition();
- }, 3000);
- })();
- function Slider(container, nav) {
- this.container = container;
- this.nav = nav.show();
- this.imgs = this.container.find('img');
- this.imgWidth = this.imgs[0].width;
- this.imgsLen = this.imgs.length;
- this.current = 0;
- }
- Slider.prototype.transition = function(coords) {
- this.container.animate({
- 'margin-left': coords || -(this.current * this.imgWidth)
- });
- };
- Slider.prototype.setCoordinates = function(dir) {
- var pos = this.current;
- pos += ( ~~(dir === 'next') || -1); // add or substract 1
- this.current = (pos < 0) ? this.imgsLen - 1 : pos % this.imgsLen;
- return pos;
- };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement