-
Notifications
You must be signed in to change notification settings - Fork 1
/
jquery.carousel.js
106 lines (106 loc) · 3.63 KB
/
jquery.carousel.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
;(function($, window, document, undefined) {
var Carousel = function(wrapper, options) {
this.wrapper = wrapper;
// Store options while extending defaults
this.options = $.extend({}, Carousel.defaults, options);
this.init();
};
Carousel.defaults = {};
Carousel.prototype = {
init: function() {
var carousel = this;
this.list = $(this.wrapper).find('ul');
// Define the children property as a method in order for it
// to update its child order every time it changes
this.children = function() {
return carousel.list.find('> li');
};
// Get first element if previously set
this.current = this.children().filter('.current').first();
// Set first element as current otherwise
if (!this.current.length) {
this.current = this.children().first().addClass('current');
}
// Re-set carousel height every time an image is loaded
this.children().find('img').load(function() {
if($(this).parent('li').hasClass('current')) {
carousel.slide(true);
}
});
// Save order index as their position is going to change
this.children().each(function(i) {
// Ignore if already set
if ($(this).data('index') === null) {
$(this).data('index', i);
}
});
// Setup and show nav only if more than one child
if (this.children().length > 1) {
$(this.wrapper).find('.nav').show();
// Bind click events on arrow buttons
$(this.wrapper).find('.arrow').unbind('click').click(function(e) {
e.preventDefault();
carousel.move($(this).data('direction'));
});
} else {
$(this.wrapper).find('.nav').hide();
}
// Init only if at least on child
if (this.children().length) {
this.slide(true);
this.update();
}
},
move: function(direction) {
var next;
if (direction == 'prev') {
if (this.current.is(':first-child')) {
// Move last children to the beggining of the list and
// reset position
this.list.prepend(this.children().last());
this.resetPosition();
}
next = this.current.prev();
} else {
if (this.current.is(':last-child')) {
// Move first children to the end of the list and
// reset position
this.list.append(this.children().first());
this.resetPosition();
}
next = this.current.next();
}
// Replace current element and move CSS class to it
this.children().removeClass('current')
.filter(this.current = next).addClass('current');
this.slide();
this.update();
},
resetPosition: function() {
this.list.stop().css('marginLeft', -this.current.position().left);
},
slide: function(direct) {
this.list.stop().animate({
marginLeft: -this.current.position().left
}, direct ? 0 : 400);
$(this.wrapper).find('.mask').stop().animate({
height: this.current.outerHeight()
}, direct ? 0 : 400);
},
update: function() {
// Populate navigation variables
$(this.wrapper).find('.nav .total').html(this.children().length);
$(this.wrapper).find('.nav .current').html(this.current.data('index') + 1);
// Run user callback, if present
if (typeof(this.options.callback) == 'function') {
this.options.callback.call(this, this.current.find('img'));
}
}
};
$.fn.carousel = function(options) {
this.each(function() {
$.data(this, 'carousel', new Carousel(this, options));
});
return this;
};
})(jQuery, window, document);