forked from richardscarrott/jquery-carousel
-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery.carousel.js
159 lines (152 loc) · 4.61 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
/*
* jQuery Carousel Plugin v1.0
* http://richardscarrott.co.uk/posts/view/jquery-carousel-plugin
*
* Copyright (c) 2010 Richard Scarrott
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Requires jQuery v1.4+
*
*/
// prototypal inheritance
if (typeof Object.create !== 'function') {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}
(function($) {
// ie alias
var headache = $.browser.msie && $.browser.version.substr(0,1)<9;
// carousel
var Carousel = {
settings: {
itemsPerPage: 1,
itemsPerTransition: 1,
noOfRows: 1,
pagination: true,
nextPrevLinks: true,
speed: 'normal',
easing: 'swing'
},
init: function(el, options) {
if (!el.length) {return false;}
this.options = $.extend({}, this.settings, options);
this.itemIndex = 0;
this.container = el;
this.runner = this.container.find('ul');
this.items = this.runner.children('li');
this.noOfItems = this.items.length;
this.setRunnerWidth();
if (this.noOfItems <= this.options.itemsPerPage) {return false;} // bail if there are too few items to paginate
this.insertMask();
this.noOfPages = Math.ceil((this.noOfItems - this.options.itemsPerPage) / this.options.itemsPerTransition) + 1;
if (this.options.pagination) {this.insertPagination();}
if (this.options.nextPrevLinks) {this.insertNextPrevLinks();}
this.updateBtnStyles();
},
insertMask: function() {
this.runner.wrap('<div class="mask" />');
this.mask = this.container.find('div.mask');
// set mask height so items can be of varying height
var maskHeight = this.runner.outerHeight(true);
this.mask = this.container.find('div.mask');
this.mask.height(maskHeight);
},
setRunnerWidth: function() {
this.noOfItems = Math.round(this.noOfItems / this.options.noOfRows);
var width = this.items.outerWidth(true) * this.noOfItems;
this.runner.width(width);
},
insertPagination: function() {
var i, links = [];
this.paginationLinks = $('<ol class="pagination-links" />');
for (i = 0; i < this.noOfPages; i++) {
links[i] = '<li><a href="#item-' + i + '">' + (i + 1) + '</a></li>';
}
this.paginationLinks
.append(links.join(''))
.appendTo(this.container)
.find('a')
.bind('click.carousel', $.proxy(this, 'paginationHandler'));
},
paginationHandler: function(e) {
this.itemIndex = e.target.hash.substr(1).split('-')[1] * this.options.itemsPerTransition;
this.animate();
return false;
},
insertNextPrevLinks: function() {
this.prevLink = $('<a href="#" class="prev">Prev</a>')
.bind('click.carousel', $.proxy(this, 'prevItem'))
.appendTo(this.container);
this.nextLink = $('<a href="#" class="next">Next</a>')
.bind('click.carousel', $.proxy(this, 'nextItem'))
.appendTo(this.container);
},
nextItem: function() {
this.itemIndex = this.itemIndex + this.options.itemsPerTransition;
this.animate();
return false;
},
prevItem: function() {
this.itemIndex = this.itemIndex - this.options.itemsPerTransition;
this.animate();
return false;
},
updateBtnStyles: function() {
if (this.options.pagination) {
this.paginationLinks
.children('li')
.removeClass('current')
.eq(Math.ceil(this.itemIndex / this.options.itemsPerTransition))
.addClass('current');
}
if (this.options.nextPrevLinks) {
this.nextLink
.add(this.prevLink)
.removeClass('disabled');
if (this.itemIndex === (this.noOfItems - this.options.itemsPerPage)) {
this.nextLink.addClass('disabled');
}
else if (this.itemIndex === 0) {
this.prevLink.addClass('disabled');
}
}
},
animate: function() {
var nextItem, pos;
// check whether there are enough items to animate to
if (this.itemIndex > (this.noOfItems - this.options.itemsPerPage)) {
this.itemIndex = this.noOfItems - this.options.itemsPerPage; // go to last panel - items per transition
}
if (this.itemIndex < 0) {
this.itemIndex = 0; // go to first
}
nextItem = this.items.eq(this.itemIndex);
pos = nextItem.position();
if (headache) {
this.runner
.stop()
.animate({left: -pos.left}, this.options.speed, this.options.easing);
}
else {
this.mask
.stop()
.animate({scrollLeft: pos.left}, this.options.speed, this.options.easing);
}
this.updateBtnStyles();
}
};
// bridge
$.fn.carousel = function(options) {
return this.each(function() {
var obj = Object.create(Carousel);
obj.init($(this), options);
$.data(this, 'carousel', obj);
});
};
})(jQuery);