bxslider-rails 4.1.2 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 2d61afa0063f797eba4c74c6d5e4a8678d2a9952
4
- data.tar.gz: 16a5fa884934624e81b6519fefb11802a1b349f3
3
+ metadata.gz: 27ca8f4c90c1339f7027fcbd0df6280aa1885bfa
4
+ data.tar.gz: 3a5b62557116b7146f2fdb475f8bee139afcc70f
5
5
  SHA512:
6
- metadata.gz: bf4bcd3e8a1c125317935017157fc3764d8444cd79ca31636da0ca217f73bb8263aad17fbc53bd15b3e2082ee59e3f3ae5ea7ae33da322798c97793863889d4f
7
- data.tar.gz: 052d2164522a31d3e5bcabe0940679efcb53364921d9a1d188e550a27963049e80fc9d7e6b5150b62d2290af872e311c3f613f25d6e10268257ae51c62f2d880
6
+ metadata.gz: a0de1deac3d4a33809c4e6d4698a776ae524b98d70dcd41f2d34d605e6b79d42654894aa151125511773058d975beac35fc094e28548f57b33d73c003b48096f
7
+ data.tar.gz: 71090fcc02964b891e5cebca45d0908a74475788635c5ef048996939a29ce69b297cdf7451d8d3a9819fbe7d25e23d6c35d9e99bc988fb577f8183262ec422ad
data/README.md CHANGED
@@ -1,13 +1,13 @@
1
- # bxSlider Rails Gem - v4.1.2
1
+ # bxSlider Rails Gem - v4.2.0
2
2
 
3
- jQuery bxSlider v4.1.2 - http://bxslider.com
3
+ jQuery bxSlider v4.2.0 - http://bxslider.com
4
4
 
5
5
  bxSlider Author: Steven Wanderski, Copyright 2011
6
6
  bxslider-rails Author: Mauricio Natanael Ferreira.
7
7
 
8
8
  ### Extra info
9
9
 
10
- bxSlider 4.1.2 == bxslider-rails (4.1.2)
10
+ bxSlider 4.2.0 == bxslider-rails (4.2.0)
11
11
 
12
12
  ## Installation
13
13
 
@@ -60,6 +60,12 @@ You have to add images to precompile array manually in your `config/environments
60
60
  # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
61
61
  config.assets.precompile += %w( bx_loader.gif controls.png )
62
62
 
63
+ On rails 4.2 you need to change it on `config/initializers/assets.rb`
64
+
65
+ # Precompile additional assets.
66
+ # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
67
+ Rails.application.config.assets.precompile += %w( bx_loader.gif controls.png )
68
+
63
69
  ## REMEMBER TO INITIALIZE IT!
64
70
 
65
71
  If you are going to use coffee script:
@@ -1,5 +1,5 @@
1
1
  module Bxslider
2
2
  module Rails
3
- VERSION = "4.1.2"
3
+ VERSION = "4.2.0"
4
4
  end
5
5
  end
@@ -1,1343 +1,1369 @@
1
- /**
2
- * BxSlider v4.1.2 - Fully loaded, responsive content slider
1
+ /***
2
+ * BxSlider v4.2.0 - Fully loaded, responsive content slider
3
3
  * http://bxslider.com
4
4
  *
5
5
  * Copyright 2014, Steven Wanderski - http://stevenwanderski.com - http://bxcreative.com
6
6
  * Written while drinking Belgian ales and listening to jazz
7
7
  *
8
8
  * Released under the MIT license - http://opensource.org/licenses/MIT
9
- */
9
+ ***/
10
10
 
11
11
  ;(function($){
12
12
 
13
- var plugin = {};
14
-
15
- var defaults = {
16
-
17
- // GENERAL
18
- mode: 'horizontal',
19
- slideSelector: '',
20
- infiniteLoop: true,
21
- hideControlOnEnd: false,
22
- speed: 500,
23
- easing: null,
24
- slideMargin: 0,
25
- startSlide: 0,
26
- randomStart: false,
27
- captions: false,
28
- ticker: false,
29
- tickerHover: false,
30
- adaptiveHeight: false,
31
- adaptiveHeightSpeed: 500,
32
- video: false,
33
- useCSS: true,
34
- preloadImages: 'visible',
35
- responsive: true,
36
- slideZIndex: 50,
37
- wrapperClass: 'bx-wrapper',
38
-
39
- // TOUCH
40
- touchEnabled: true,
41
- swipeThreshold: 50,
42
- oneToOneTouch: true,
43
- preventDefaultSwipeX: true,
44
- preventDefaultSwipeY: false,
45
-
46
- // PAGER
47
- pager: true,
48
- pagerType: 'full',
49
- pagerShortSeparator: ' / ',
50
- pagerSelector: null,
51
- buildPager: null,
52
- pagerCustom: null,
53
-
54
- // CONTROLS
55
- controls: true,
56
- nextText: 'Next',
57
- prevText: 'Prev',
58
- nextSelector: null,
59
- prevSelector: null,
60
- autoControls: false,
61
- startText: 'Start',
62
- stopText: 'Stop',
63
- autoControlsCombine: false,
64
- autoControlsSelector: null,
65
-
66
- // AUTO
67
- auto: false,
68
- pause: 4000,
69
- autoStart: true,
70
- autoDirection: 'next',
71
- autoHover: false,
72
- autoDelay: 0,
73
- autoSlideForOnePage: false,
74
-
75
- // CAROUSEL
76
- minSlides: 1,
77
- maxSlides: 1,
78
- moveSlides: 0,
79
- slideWidth: 0,
80
-
81
- // CALLBACKS
82
- onSliderLoad: function() {},
83
- onSlideBefore: function() {},
84
- onSlideAfter: function() {},
85
- onSlideNext: function() {},
86
- onSlidePrev: function() {},
87
- onSliderResize: function() {}
88
- }
89
-
90
- $.fn.bxSlider = function(options){
91
-
92
- if(this.length == 0) return this;
93
-
94
- // support mutltiple elements
95
- if(this.length > 1){
96
- this.each(function(){$(this).bxSlider(options)});
97
- return this;
98
- }
99
-
100
- // create a namespace to be used throughout the plugin
101
- var slider = {};
102
- // set a reference to our slider element
103
- var el = this;
104
- plugin.el = this;
105
-
106
- /**
107
- * Makes slideshow responsive
108
- */
109
- // first get the original window dimens (thanks alot IE)
110
- var windowWidth = $(window).width();
111
- var windowHeight = $(window).height();
112
-
113
-
114
-
115
- /**
116
- * ===================================================================================
117
- * = PRIVATE FUNCTIONS
118
- * ===================================================================================
119
- */
120
-
121
- /**
122
- * Initializes namespace settings to be used throughout plugin
123
- */
124
- var init = function(){
125
- // merge user-supplied options with the defaults
126
- slider.settings = $.extend({}, defaults, options);
127
- // parse slideWidth setting
128
- slider.settings.slideWidth = parseInt(slider.settings.slideWidth);
129
- // store the original children
130
- slider.children = el.children(slider.settings.slideSelector);
131
- // check if actual number of slides is less than minSlides / maxSlides
132
- if(slider.children.length < slider.settings.minSlides) slider.settings.minSlides = slider.children.length;
133
- if(slider.children.length < slider.settings.maxSlides) slider.settings.maxSlides = slider.children.length;
134
- // if random start, set the startSlide setting to random number
135
- if(slider.settings.randomStart) slider.settings.startSlide = Math.floor(Math.random() * slider.children.length);
136
- // store active slide information
137
- slider.active = { index: slider.settings.startSlide }
138
- // store if the slider is in carousel mode (displaying / moving multiple slides)
139
- slider.carousel = slider.settings.minSlides > 1 || slider.settings.maxSlides > 1;
140
- // if carousel, force preloadImages = 'all'
141
- if(slider.carousel) slider.settings.preloadImages = 'all';
142
- // calculate the min / max width thresholds based on min / max number of slides
143
- // used to setup and update carousel slides dimensions
144
- slider.minThreshold = (slider.settings.minSlides * slider.settings.slideWidth) + ((slider.settings.minSlides - 1) * slider.settings.slideMargin);
145
- slider.maxThreshold = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
146
- // store the current state of the slider (if currently animating, working is true)
147
- slider.working = false;
148
- // initialize the controls object
149
- slider.controls = {};
150
- // initialize an auto interval
151
- slider.interval = null;
152
- // determine which property to use for transitions
153
- slider.animProp = slider.settings.mode == 'vertical' ? 'top' : 'left';
154
- // determine if hardware acceleration can be used
155
- slider.usingCSS = slider.settings.useCSS && slider.settings.mode != 'fade' && (function(){
156
- // create our test div element
157
- var div = document.createElement('div');
158
- // css transition properties
159
- var props = ['WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'];
160
- // test for each property
161
- for(var i in props){
162
- if(div.style[props[i]] !== undefined){
163
- slider.cssPrefix = props[i].replace('Perspective', '').toLowerCase();
164
- slider.animProp = '-' + slider.cssPrefix + '-transform';
165
- return true;
166
- }
167
- }
168
- return false;
169
- }());
170
- // if vertical mode always make maxSlides and minSlides equal
171
- if(slider.settings.mode == 'vertical') slider.settings.maxSlides = slider.settings.minSlides;
172
- // save original style data
173
- el.data("origStyle", el.attr("style"));
174
- el.children(slider.settings.slideSelector).each(function() {
175
- $(this).data("origStyle", $(this).attr("style"));
176
- });
177
- // perform all DOM / CSS modifications
178
- setup();
179
- }
180
-
181
- /**
182
- * Performs all DOM and CSS modifications
183
- */
184
- var setup = function(){
185
- // wrap el in a wrapper
186
- el.wrap('<div class="' + slider.settings.wrapperClass + '"><div class="bx-viewport"></div></div>');
187
- // store a namspace reference to .bx-viewport
188
- slider.viewport = el.parent();
189
- // add a loading div to display while images are loading
190
- slider.loader = $('<div class="bx-loading" />');
191
- slider.viewport.prepend(slider.loader);
192
- // set el to a massive width, to hold any needed slides
193
- // also strip any margin and padding from el
194
- el.css({
195
- width: slider.settings.mode == 'horizontal' ? (slider.children.length * 100 + 215) + '%' : 'auto',
196
- position: 'relative'
197
- });
198
- // if using CSS, add the easing property
199
- if(slider.usingCSS && slider.settings.easing){
200
- el.css('-' + slider.cssPrefix + '-transition-timing-function', slider.settings.easing);
201
- // if not using CSS and no easing value was supplied, use the default JS animation easing (swing)
202
- }else if(!slider.settings.easing){
203
- slider.settings.easing = 'swing';
204
- }
205
- var slidesShowing = getNumberSlidesShowing();
206
- // make modifications to the viewport (.bx-viewport)
207
- slider.viewport.css({
208
- width: '100%',
209
- overflow: 'hidden',
210
- position: 'relative'
211
- });
212
- slider.viewport.parent().css({
213
- maxWidth: getViewportMaxWidth()
214
- });
215
- // make modification to the wrapper (.bx-wrapper)
216
- if(!slider.settings.pager) {
217
- slider.viewport.parent().css({
218
- margin: '0 auto 0px'
219
- });
220
- }
221
- // apply css to all slider children
222
- slider.children.css({
223
- 'float': slider.settings.mode == 'horizontal' ? 'left' : 'none',
224
- listStyle: 'none',
225
- position: 'relative'
226
- });
227
- // apply the calculated width after the float is applied to prevent scrollbar interference
228
- slider.children.css('width', getSlideWidth());
229
- // if slideMargin is supplied, add the css
230
- if(slider.settings.mode == 'horizontal' && slider.settings.slideMargin > 0) slider.children.css('marginRight', slider.settings.slideMargin);
231
- if(slider.settings.mode == 'vertical' && slider.settings.slideMargin > 0) slider.children.css('marginBottom', slider.settings.slideMargin);
232
- // if "fade" mode, add positioning and z-index CSS
233
- if(slider.settings.mode == 'fade'){
234
- slider.children.css({
235
- position: 'absolute',
236
- zIndex: 0,
237
- display: 'none'
238
- });
239
- // prepare the z-index on the showing element
240
- slider.children.eq(slider.settings.startSlide).css({zIndex: slider.settings.slideZIndex, display: 'block'});
241
- }
242
- // create an element to contain all slider controls (pager, start / stop, etc)
243
- slider.controls.el = $('<div class="bx-controls" />');
244
- // if captions are requested, add them
245
- if(slider.settings.captions) appendCaptions();
246
- // check if startSlide is last slide
247
- slider.active.last = slider.settings.startSlide == getPagerQty() - 1;
248
- // if video is true, set up the fitVids plugin
249
- if(slider.settings.video) el.fitVids();
250
- // set the default preload selector (visible)
251
- var preloadSelector = slider.children.eq(slider.settings.startSlide);
252
- if (slider.settings.preloadImages == "all") preloadSelector = slider.children;
253
- // only check for control addition if not in "ticker" mode
254
- if(!slider.settings.ticker){
255
- // if pager is requested, add it
256
- if(slider.settings.pager) appendPager();
257
- // if controls are requested, add them
258
- if(slider.settings.controls) appendControls();
259
- // if auto is true, and auto controls are requested, add them
260
- if(slider.settings.auto && slider.settings.autoControls) appendControlsAuto();
261
- // if any control option is requested, add the controls wrapper
262
- if(slider.settings.controls || slider.settings.autoControls || slider.settings.pager) slider.viewport.after(slider.controls.el);
263
- // if ticker mode, do not allow a pager
264
- }else{
265
- slider.settings.pager = false;
266
- }
267
- // preload all images, then perform final DOM / CSS modifications that depend on images being loaded
268
- loadElements(preloadSelector, start);
269
- }
270
-
271
- var loadElements = function(selector, callback){
272
- var total = selector.find('img, iframe').length;
273
- if (total == 0){
274
- callback();
275
- return;
276
- }
277
- var count = 0;
278
- selector.find('img, iframe').each(function(){
279
- $(this).one('load', function() {
280
- if(++count == total) callback();
281
- }).each(function() {
282
- if(this.complete) $(this).load();
283
- });
284
- });
285
- }
286
-
287
- /**
288
- * Start the slider
289
- */
290
- var start = function(){
291
- // if infinite loop, prepare additional slides
292
- if(slider.settings.infiniteLoop && slider.settings.mode != 'fade' && !slider.settings.ticker){
293
- var slice = slider.settings.mode == 'vertical' ? slider.settings.minSlides : slider.settings.maxSlides;
294
- var sliceAppend = slider.children.slice(0, slice).clone().addClass('bx-clone');
295
- var slicePrepend = slider.children.slice(-slice).clone().addClass('bx-clone');
296
- el.append(sliceAppend).prepend(slicePrepend);
297
- }
298
- // remove the loading DOM element
299
- slider.loader.remove();
300
- // set the left / top position of "el"
301
- setSlidePosition();
302
- // if "vertical" mode, always use adaptiveHeight to prevent odd behavior
303
- if (slider.settings.mode == 'vertical') slider.settings.adaptiveHeight = true;
304
- // set the viewport height
305
- slider.viewport.height(getViewportHeight());
306
- // make sure everything is positioned just right (same as a window resize)
307
- el.redrawSlider();
308
- // onSliderLoad callback
309
- slider.settings.onSliderLoad(slider.active.index);
310
- // slider has been fully initialized
311
- slider.initialized = true;
312
- // bind the resize call to the window
313
- if (slider.settings.responsive) $(window).bind('resize', resizeWindow);
314
- // if auto is true and has more than 1 page, start the show
315
- if (slider.settings.auto && slider.settings.autoStart && (getPagerQty() > 1 || slider.settings.autoSlideForOnePage)) initAuto();
316
- // if ticker is true, start the ticker
317
- if (slider.settings.ticker) initTicker();
318
- // if pager is requested, make the appropriate pager link active
319
- if (slider.settings.pager) updatePagerActive(slider.settings.startSlide);
320
- // check for any updates to the controls (like hideControlOnEnd updates)
321
- if (slider.settings.controls) updateDirectionControls();
322
- // if touchEnabled is true, setup the touch events
323
- if (slider.settings.touchEnabled && !slider.settings.ticker) initTouch();
324
- }
325
-
326
- /**
327
- * Returns the calculated height of the viewport, used to determine either adaptiveHeight or the maxHeight value
328
- */
329
- var getViewportHeight = function(){
330
- var height = 0;
331
- // first determine which children (slides) should be used in our height calculation
332
- var children = $();
333
- // if mode is not "vertical" and adaptiveHeight is false, include all children
334
- if(slider.settings.mode != 'vertical' && !slider.settings.adaptiveHeight){
335
- children = slider.children;
336
- }else{
337
- // if not carousel, return the single active child
338
- if(!slider.carousel){
339
- children = slider.children.eq(slider.active.index);
340
- // if carousel, return a slice of children
341
- }else{
342
- // get the individual slide index
343
- var currentIndex = slider.settings.moveSlides == 1 ? slider.active.index : slider.active.index * getMoveBy();
344
- // add the current slide to the children
345
- children = slider.children.eq(currentIndex);
346
- // cycle through the remaining "showing" slides
347
- for (i = 1; i <= slider.settings.maxSlides - 1; i++){
348
- // if looped back to the start
349
- if(currentIndex + i >= slider.children.length){
350
- children = children.add(slider.children.eq(i - 1));
351
- }else{
352
- children = children.add(slider.children.eq(currentIndex + i));
353
- }
354
- }
355
- }
356
- }
357
- // if "vertical" mode, calculate the sum of the heights of the children
358
- if(slider.settings.mode == 'vertical'){
359
- children.each(function(index) {
360
- height += $(this).outerHeight();
361
- });
362
- // add user-supplied margins
363
- if(slider.settings.slideMargin > 0){
364
- height += slider.settings.slideMargin * (slider.settings.minSlides - 1);
365
- }
366
- // if not "vertical" mode, calculate the max height of the children
367
- }else{
368
- height = Math.max.apply(Math, children.map(function(){
369
- return $(this).outerHeight(false);
370
- }).get());
371
- }
372
-
373
- if(slider.viewport.css('box-sizing') == 'border-box'){
374
- height += parseFloat(slider.viewport.css('padding-top')) + parseFloat(slider.viewport.css('padding-bottom')) +
375
- parseFloat(slider.viewport.css('border-top-width')) + parseFloat(slider.viewport.css('border-bottom-width'));
376
- }else if(slider.viewport.css('box-sizing') == 'padding-box'){
377
- height += parseFloat(slider.viewport.css('padding-top')) + parseFloat(slider.viewport.css('padding-bottom'));
378
- }
379
-
380
- return height;
381
- }
382
-
383
- /**
384
- * Returns the calculated width to be used for the outer wrapper / viewport
385
- */
386
- var getViewportMaxWidth = function(){
387
- var width = '100%';
388
- if(slider.settings.slideWidth > 0){
389
- if(slider.settings.mode == 'horizontal'){
390
- width = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
391
- }else{
392
- width = slider.settings.slideWidth;
393
- }
394
- }
395
- return width;
396
- }
397
-
398
- /**
399
- * Returns the calculated width to be applied to each slide
400
- */
401
- var getSlideWidth = function(){
402
- // start with any user-supplied slide width
403
- var newElWidth = slider.settings.slideWidth;
404
- // get the current viewport width
405
- var wrapWidth = slider.viewport.width();
406
- // if slide width was not supplied, or is larger than the viewport use the viewport width
407
- if(slider.settings.slideWidth == 0 ||
408
- (slider.settings.slideWidth > wrapWidth && !slider.carousel) ||
409
- slider.settings.mode == 'vertical'){
410
- newElWidth = wrapWidth;
411
- // if carousel, use the thresholds to determine the width
412
- }else if(slider.settings.maxSlides > 1 && slider.settings.mode == 'horizontal'){
413
- if(wrapWidth > slider.maxThreshold){
414
- // newElWidth = (wrapWidth - (slider.settings.slideMargin * (slider.settings.maxSlides - 1))) / slider.settings.maxSlides;
415
- }else if(wrapWidth < slider.minThreshold){
416
- newElWidth = (wrapWidth - (slider.settings.slideMargin * (slider.settings.minSlides - 1))) / slider.settings.minSlides;
417
- }
418
- }
419
- return newElWidth;
420
- }
421
-
422
- /**
423
- * Returns the number of slides currently visible in the viewport (includes partially visible slides)
424
- */
425
- var getNumberSlidesShowing = function(){
426
- var slidesShowing = 1;
427
- if(slider.settings.mode == 'horizontal' && slider.settings.slideWidth > 0){
428
- // if viewport is smaller than minThreshold, return minSlides
429
- if(slider.viewport.width() < slider.minThreshold){
430
- slidesShowing = slider.settings.minSlides;
431
- // if viewport is larger than minThreshold, return maxSlides
432
- }else if(slider.viewport.width() > slider.maxThreshold){
433
- slidesShowing = slider.settings.maxSlides;
434
- // if viewport is between min / max thresholds, divide viewport width by first child width
435
- }else{
436
- var childWidth = slider.children.first().width() + slider.settings.slideMargin;
437
- slidesShowing = Math.floor((slider.viewport.width() +
438
- slider.settings.slideMargin) / childWidth);
439
- }
440
- // if "vertical" mode, slides showing will always be minSlides
441
- }else if(slider.settings.mode == 'vertical'){
442
- slidesShowing = slider.settings.minSlides;
443
- }
444
- return slidesShowing;
445
- }
446
-
447
- /**
448
- * Returns the number of pages (one full viewport of slides is one "page")
449
- */
450
- var getPagerQty = function(){
451
- var pagerQty = 0;
452
- // if moveSlides is specified by the user
453
- if(slider.settings.moveSlides > 0){
454
- if(slider.settings.infiniteLoop){
455
- pagerQty = Math.ceil(slider.children.length / getMoveBy());
456
- }else{
457
- // use a while loop to determine pages
458
- var breakPoint = 0;
459
- var counter = 0
460
- // when breakpoint goes above children length, counter is the number of pages
461
- while (breakPoint < slider.children.length){
462
- ++pagerQty;
463
- breakPoint = counter + getNumberSlidesShowing();
464
- counter += slider.settings.moveSlides <= getNumberSlidesShowing() ? slider.settings.moveSlides : getNumberSlidesShowing();
465
- }
466
- }
467
- // if moveSlides is 0 (auto) divide children length by sides showing, then round up
468
- }else{
469
- pagerQty = Math.ceil(slider.children.length / getNumberSlidesShowing());
470
- }
471
- return pagerQty;
472
- }
473
-
474
- /**
475
- * Returns the number of indivual slides by which to shift the slider
476
- */
477
- var getMoveBy = function(){
478
- // if moveSlides was set by the user and moveSlides is less than number of slides showing
479
- if(slider.settings.moveSlides > 0 && slider.settings.moveSlides <= getNumberSlidesShowing()){
480
- return slider.settings.moveSlides;
481
- }
482
- // if moveSlides is 0 (auto)
483
- return getNumberSlidesShowing();
484
- }
485
-
486
- /**
487
- * Sets the slider's (el) left or top position
488
- */
489
- var setSlidePosition = function(){
490
- // if last slide, not infinite loop, and number of children is larger than specified maxSlides
491
- if(slider.children.length > slider.settings.maxSlides && slider.active.last && !slider.settings.infiniteLoop){
492
- if (slider.settings.mode == 'horizontal'){
493
- // get the last child's position
494
- var lastChild = slider.children.last();
495
- var position = lastChild.position();
496
- // set the left position
497
- setPositionProperty(-(position.left - (slider.viewport.width() - lastChild.outerWidth())), 'reset', 0);
498
- }else if(slider.settings.mode == 'vertical'){
499
- // get the last showing index's position
500
- var lastShowingIndex = slider.children.length - slider.settings.minSlides;
501
- var position = slider.children.eq(lastShowingIndex).position();
502
- // set the top position
503
- setPositionProperty(-position.top, 'reset', 0);
504
- }
505
- // if not last slide
506
- }else{
507
- // get the position of the first showing slide
508
- var position = slider.children.eq(slider.active.index * getMoveBy()).position();
509
- // check for last slide
510
- if (slider.active.index == getPagerQty() - 1) slider.active.last = true;
511
- // set the repective position
512
- if (position != undefined){
513
- if (slider.settings.mode == 'horizontal') setPositionProperty(-position.left, 'reset', 0);
514
- else if (slider.settings.mode == 'vertical') setPositionProperty(-position.top, 'reset', 0);
515
- }
516
- }
517
- }
518
-
519
- /**
520
- * Sets the el's animating property position (which in turn will sometimes animate el).
521
- * If using CSS, sets the transform property. If not using CSS, sets the top / left property.
522
- *
523
- * @param value (int)
524
- * - the animating property's value
525
- *
526
- * @param type (string) 'slider', 'reset', 'ticker'
527
- * - the type of instance for which the function is being
528
- *
529
- * @param duration (int)
530
- * - the amount of time (in ms) the transition should occupy
531
- *
532
- * @param params (array) optional
533
- * - an optional parameter containing any variables that need to be passed in
534
- */
535
- var setPositionProperty = function(value, type, duration, params){
536
- // use CSS transform
537
- if(slider.usingCSS){
538
- // determine the translate3d value
539
- var propValue = slider.settings.mode == 'vertical' ? 'translate3d(0, ' + value + 'px, 0)' : 'translate3d(' + value + 'px, 0, 0)';
540
- // add the CSS transition-duration
541
- el.css('-' + slider.cssPrefix + '-transition-duration', duration / 1000 + 's');
542
- if(type == 'slide'){
543
- // set the property value
544
- el.css(slider.animProp, propValue);
545
- // bind a callback method - executes when CSS transition completes
546
- el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
547
- // unbind the callback
548
- el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
549
- updateAfterSlideTransition();
550
- });
551
- }else if(type == 'reset'){
552
- el.css(slider.animProp, propValue);
553
- }else if(type == 'ticker'){
554
- // make the transition use 'linear'
555
- el.css('-' + slider.cssPrefix + '-transition-timing-function', 'linear');
556
- el.css(slider.animProp, propValue);
557
- // bind a callback method - executes when CSS transition completes
558
- el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
559
- // unbind the callback
560
- el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
561
- // reset the position
562
- setPositionProperty(params['resetValue'], 'reset', 0);
563
- // start the loop again
564
- tickerLoop();
565
- });
566
- }
567
- // use JS animate
568
- }else{
569
- var animateObj = {};
570
- animateObj[slider.animProp] = value;
571
- if(type == 'slide'){
572
- el.animate(animateObj, duration, slider.settings.easing, function(){
573
- updateAfterSlideTransition();
574
- });
575
- }else if(type == 'reset'){
576
- el.css(slider.animProp, value)
577
- }else if(type == 'ticker'){
578
- el.animate(animateObj, speed, 'linear', function(){
579
- setPositionProperty(params['resetValue'], 'reset', 0);
580
- // run the recursive loop after animation
581
- tickerLoop();
582
- });
583
- }
584
- }
585
- }
586
-
587
- /**
588
- * Populates the pager with proper amount of pages
589
- */
590
- var populatePager = function(){
591
- var pagerHtml = '';
592
- var pagerQty = getPagerQty();
593
- // loop through each pager item
594
- for(var i=0; i < pagerQty; i++){
595
- var linkContent = '';
596
- // if a buildPager function is supplied, use it to get pager link value, else use index + 1
597
- if(slider.settings.buildPager && $.isFunction(slider.settings.buildPager)){
598
- linkContent = slider.settings.buildPager(i);
599
- slider.pagerEl.addClass('bx-custom-pager');
600
- }else{
601
- linkContent = i + 1;
602
- slider.pagerEl.addClass('bx-default-pager');
603
- }
604
- // var linkContent = slider.settings.buildPager && $.isFunction(slider.settings.buildPager) ? slider.settings.buildPager(i) : i + 1;
605
- // add the markup to the string
606
- pagerHtml += '<div class="bx-pager-item"><a href="" data-slide-index="' + i + '" class="bx-pager-link">' + linkContent + '</a></div>';
607
- };
608
- // populate the pager element with pager links
609
- slider.pagerEl.html(pagerHtml);
610
- }
611
-
612
- /**
613
- * Appends the pager to the controls element
614
- */
615
- var appendPager = function(){
616
- if(!slider.settings.pagerCustom){
617
- // create the pager DOM element
618
- slider.pagerEl = $('<div class="bx-pager" />');
619
- // if a pager selector was supplied, populate it with the pager
620
- if(slider.settings.pagerSelector){
621
- $(slider.settings.pagerSelector).html(slider.pagerEl);
622
- // if no pager selector was supplied, add it after the wrapper
623
- }else{
624
- slider.controls.el.addClass('bx-has-pager').append(slider.pagerEl);
625
- }
626
- // populate the pager
627
- populatePager();
628
- }else{
629
- slider.pagerEl = $(slider.settings.pagerCustom);
630
- }
631
- // assign the pager click binding
632
- slider.pagerEl.on('click', 'a', clickPagerBind);
633
- }
634
-
635
- /**
636
- * Appends prev / next controls to the controls element
637
- */
638
- var appendControls = function(){
639
- slider.controls.next = $('<a class="bx-next" href="">' + slider.settings.nextText + '</a>');
640
- slider.controls.prev = $('<a class="bx-prev" href="">' + slider.settings.prevText + '</a>');
641
- // bind click actions to the controls
642
- slider.controls.next.bind('click', clickNextBind);
643
- slider.controls.prev.bind('click', clickPrevBind);
644
- // if nextSlector was supplied, populate it
645
- if(slider.settings.nextSelector){
646
- $(slider.settings.nextSelector).append(slider.controls.next);
647
- }
648
- // if prevSlector was supplied, populate it
649
- if(slider.settings.prevSelector){
650
- $(slider.settings.prevSelector).append(slider.controls.prev);
651
- }
652
- // if no custom selectors were supplied
653
- if(!slider.settings.nextSelector && !slider.settings.prevSelector){
654
- // add the controls to the DOM
655
- slider.controls.directionEl = $('<div class="bx-controls-direction" />');
656
- // add the control elements to the directionEl
657
- slider.controls.directionEl.append(slider.controls.prev).append(slider.controls.next);
658
- // slider.viewport.append(slider.controls.directionEl);
659
- slider.controls.el.addClass('bx-has-controls-direction').append(slider.controls.directionEl);
660
- }
661
- }
662
-
663
- /**
664
- * Appends start / stop auto controls to the controls element
665
- */
666
- var appendControlsAuto = function(){
667
- slider.controls.start = $('<div class="bx-controls-auto-item"><a class="bx-start" href="">' + slider.settings.startText + '</a></div>');
668
- slider.controls.stop = $('<div class="bx-controls-auto-item"><a class="bx-stop" href="">' + slider.settings.stopText + '</a></div>');
669
- // add the controls to the DOM
670
- slider.controls.autoEl = $('<div class="bx-controls-auto" />');
671
- // bind click actions to the controls
672
- slider.controls.autoEl.on('click', '.bx-start', clickStartBind);
673
- slider.controls.autoEl.on('click', '.bx-stop', clickStopBind);
674
- // if autoControlsCombine, insert only the "start" control
675
- if(slider.settings.autoControlsCombine){
676
- slider.controls.autoEl.append(slider.controls.start);
677
- // if autoControlsCombine is false, insert both controls
678
- }else{
679
- slider.controls.autoEl.append(slider.controls.start).append(slider.controls.stop);
680
- }
681
- // if auto controls selector was supplied, populate it with the controls
682
- if(slider.settings.autoControlsSelector){
683
- $(slider.settings.autoControlsSelector).html(slider.controls.autoEl);
684
- // if auto controls selector was not supplied, add it after the wrapper
685
- }else{
686
- slider.controls.el.addClass('bx-has-controls-auto').append(slider.controls.autoEl);
687
- }
688
- // update the auto controls
689
- updateAutoControls(slider.settings.autoStart ? 'stop' : 'start');
690
- }
691
-
692
- /**
693
- * Appends image captions to the DOM
694
- */
695
- var appendCaptions = function(){
696
- // cycle through each child
697
- slider.children.each(function(index){
698
- // get the image title attribute
699
- var title = $(this).find('img:first').attr('title');
700
- // append the caption
701
- if (title != undefined && ('' + title).length) {
13
+ var plugin = {};
14
+
15
+ var defaults = {
16
+
17
+ // GENERAL
18
+ mode: 'horizontal',
19
+ slideSelector: '',
20
+ infiniteLoop: true,
21
+ hideControlOnEnd: false,
22
+ speed: 500,
23
+ easing: null,
24
+ slideMargin: 0,
25
+ startSlide: 0,
26
+ randomStart: false,
27
+ captions: false,
28
+ ticker: false,
29
+ tickerHover: false,
30
+ adaptiveHeight: false,
31
+ adaptiveHeightSpeed: 500,
32
+ video: false,
33
+ useCSS: true,
34
+ preloadImages: 'visible',
35
+ responsive: true,
36
+ slideZIndex: 50,
37
+ wrapperClass: 'bx-wrapper',
38
+
39
+ // TOUCH
40
+ touchEnabled: true,
41
+ swipeThreshold: 50,
42
+ oneToOneTouch: true,
43
+ preventDefaultSwipeX: true,
44
+ preventDefaultSwipeY: false,
45
+
46
+ // PAGER
47
+ pager: true,
48
+ pagerType: 'full',
49
+ pagerShortSeparator: ' / ',
50
+ pagerSelector: null,
51
+ buildPager: null,
52
+ pagerCustom: null,
53
+
54
+ // CONTROLS
55
+ controls: true,
56
+ nextText: 'Next',
57
+ prevText: 'Prev',
58
+ nextSelector: null,
59
+ prevSelector: null,
60
+ autoControls: false,
61
+ startText: 'Start',
62
+ stopText: 'Stop',
63
+ autoControlsCombine: false,
64
+ autoControlsSelector: null,
65
+
66
+ // AUTO
67
+ auto: false,
68
+ pause: 4000,
69
+ autoStart: true,
70
+ autoDirection: 'next',
71
+ autoHover: false,
72
+ autoDelay: 0,
73
+ autoSlideForOnePage: false,
74
+
75
+ // CAROUSEL
76
+ minSlides: 1,
77
+ maxSlides: 1,
78
+ moveSlides: 0,
79
+ slideWidth: 0,
80
+
81
+ // CALLBACKS
82
+ onSliderLoad: function(){},
83
+ onSlideBefore: function(){},
84
+ onSlideAfter: function(){},
85
+ onSlideNext: function(){},
86
+ onSlidePrev: function(){},
87
+ onSliderResize: function(){}
88
+ };
89
+
90
+ $.fn.bxSlider = function(options){
91
+
92
+ if(this.length === 0){
93
+ return this;
94
+ }
95
+
96
+ // support multiple elements
97
+ if(this.length > 1){
98
+ this.each(function(){
99
+ $(this).bxSlider(options);
100
+ });
101
+ return this;
102
+ }
103
+
104
+ // create a namespace to be used throughout the plugin
105
+ var slider = {};
106
+ // set a reference to our slider element
107
+ var el = this;
108
+ plugin.el = this;
109
+
110
+ /**
111
+ * Makes slideshow responsive
112
+ */
113
+ // first get the original window dimens (thanks a lot IE)
114
+ var windowWidth = $(window).width();
115
+ var windowHeight = $(window).height();
116
+
117
+
118
+
119
+ /**
120
+ * ===================================================================================
121
+ * = PRIVATE FUNCTIONS
122
+ * ===================================================================================
123
+ */
124
+
125
+ /**
126
+ * Initializes namespace settings to be used throughout plugin
127
+ */
128
+ var init = function(){
129
+ // merge user-supplied options with the defaults
130
+ slider.settings = $.extend({}, defaults, options);
131
+ // parse slideWidth setting
132
+ slider.settings.slideWidth = parseInt(slider.settings.slideWidth);
133
+ // store the original children
134
+ slider.children = el.children(slider.settings.slideSelector);
135
+ // check if actual number of slides is less than minSlides / maxSlides
136
+ if(slider.children.length < slider.settings.minSlides){ slider.settings.minSlides = slider.children.length; }
137
+ if(slider.children.length < slider.settings.maxSlides){ slider.settings.maxSlides = slider.children.length; }
138
+ // if random start, set the startSlide setting to random number
139
+ if(slider.settings.randomStart){ slider.settings.startSlide = Math.floor(Math.random() * slider.children.length); }
140
+ // store active slide information
141
+ slider.active = { index: slider.settings.startSlide };
142
+ // store if the slider is in carousel mode (displaying / moving multiple slides)
143
+ slider.carousel = slider.settings.minSlides > 1 || slider.settings.maxSlides > 1 ? false : true;
144
+ // if carousel, force preloadImages = 'all'
145
+ if(slider.carousel){ slider.settings.preloadImages = 'all'; }
146
+ // calculate the min / max width thresholds based on min / max number of slides
147
+ // used to setup and update carousel slides dimensions
148
+ slider.minThreshold = (slider.settings.minSlides * slider.settings.slideWidth) + ((slider.settings.minSlides - 1) * slider.settings.slideMargin);
149
+ slider.maxThreshold = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
150
+ // store the current state of the slider (if currently animating, working is true)
151
+ slider.working = false;
152
+ // initialize the controls object
153
+ slider.controls = {};
154
+ // initialize an auto interval
155
+ slider.interval = null;
156
+ // determine which property to use for transitions
157
+ slider.animProp = slider.settings.mode === 'vertical' ? 'top' : 'left';
158
+ // determine if hardware acceleration can be used
159
+ slider.usingCSS = slider.settings.useCSS && slider.settings.mode !== 'fade' && (function(){
160
+ // create our test div element
161
+ var div = document.createElement('div');
162
+ // css transition properties
163
+ var props = ['WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'];
164
+ // test for each property
165
+ for(var i in props){
166
+ if(div.style[props[i]] !== undefined){
167
+ slider.cssPrefix = props[i].replace('Perspective', '').toLowerCase();
168
+ slider.animProp = '-' + slider.cssPrefix + '-transform';
169
+ return true;
170
+ }
171
+ }
172
+ return false;
173
+ }());
174
+ // if vertical mode always make maxSlides and minSlides equal
175
+ if(slider.settings.mode === 'vertical'){ slider.settings.maxSlides = slider.settings.minSlides; }
176
+ // save original style data
177
+ el.data("origStyle", el.attr("style"));
178
+ el.children(slider.settings.slideSelector).each(function(){
179
+ $(this).data("origStyle", $(this).attr("style"));
180
+ });
181
+ // perform all DOM / CSS modifications
182
+ setup();
183
+ };
184
+
185
+ /**
186
+ * Performs all DOM and CSS modifications
187
+ */
188
+ var setup = function(){
189
+ // wrap el in a wrapper
190
+ el.wrap('<div class="' + slider.settings.wrapperClass + '"><div class="bx-viewport"></div></div>');
191
+ // store a namespace reference to .bx-viewport
192
+ slider.viewport = el.parent();
193
+ // add a loading div to display while images are loading
194
+ slider.loader = $('<div class="bx-loading" />');
195
+ slider.viewport.prepend(slider.loader);
196
+ // set el to a massive width, to hold any needed slides
197
+ // also strip any margin and padding from el
198
+ el.css({
199
+ width: slider.settings.mode === 'horizontal' ? (slider.children.length * 1000 + 215) + '%' : 'auto',
200
+ position: 'relative'
201
+ });
202
+ // if using CSS, add the easing property
203
+ if(slider.usingCSS && slider.settings.easing){
204
+ el.css('-' + slider.cssPrefix + '-transition-timing-function', slider.settings.easing);
205
+ // if not using CSS and no easing value was supplied, use the default JS animation easing (swing)
206
+ }else if(!slider.settings.easing){
207
+ slider.settings.easing = 'swing';
208
+ }
209
+ var slidesShowing = getNumberSlidesShowing();
210
+ // make modifications to the viewport (.bx-viewport)
211
+ slider.viewport.css({
212
+ width: '100%',
213
+ overflow: 'hidden',
214
+ position: 'relative'
215
+ });
216
+ slider.viewport.parent().css({
217
+ maxWidth: getViewportMaxWidth()
218
+ });
219
+ // make modification to the wrapper (.bx-wrapper)
220
+ if(!slider.settings.pager){
221
+ slider.viewport.parent().css({
222
+ margin: '0 auto 0px'
223
+ });
224
+ }
225
+ // apply css to all slider children
226
+ slider.children.css({
227
+ 'float': slider.settings.mode === 'horizontal' ? 'left' : 'none',
228
+ listStyle: 'none',
229
+ position: 'relative'
230
+ });
231
+ // apply the calculated width after the float is applied to prevent scrollbar interference
232
+ slider.children.css('width', getSlideWidth());
233
+ // if slideMargin is supplied, add the css
234
+ if(slider.settings.mode === 'horizontal' && slider.settings.slideMargin > 0){ slider.children.css('marginRight', slider.settings.slideMargin); }
235
+ if(slider.settings.mode === 'vertical' && slider.settings.slideMargin > 0){ slider.children.css('marginBottom', slider.settings.slideMargin); }
236
+ // if "fade" mode, add positioning and z-index CSS
237
+ if(slider.settings.mode === 'fade'){
238
+ slider.children.css({
239
+ position: 'absolute',
240
+ zIndex: 0,
241
+ display: 'none'
242
+ });
243
+ // prepare the z-index on the showing element
244
+ slider.children.eq(slider.settings.startSlide).css({zIndex: slider.settings.slideZIndex, display: 'block'});
245
+ }
246
+ // create an element to contain all slider controls (pager, start / stop, etc)
247
+ slider.controls.el = $('<div class="bx-controls" />');
248
+ // if captions are requested, add them
249
+ if(slider.settings.captions){ appendCaptions(); }
250
+ // check if startSlide is last slide
251
+ slider.active.last = slider.settings.startSlide === getPagerQty() - 1;
252
+ // if video is true, set up the fitVids plugin
253
+ if(slider.settings.video){ el.fitVids(); }
254
+ // set the default preload selector (visible)
255
+ var preloadSelector = slider.children.eq(slider.settings.startSlide);
256
+ if(slider.settings.preloadImages === "all"){ preloadSelector = slider.children; }
257
+ // only check for control addition if not in "ticker" mode
258
+ if(!slider.settings.ticker){
259
+ // if controls are requested, add them
260
+ if(slider.settings.controls){ appendControls(); }
261
+ // if auto is true, and auto controls are requested, add them
262
+ if(slider.settings.auto && slider.settings.autoControls){ appendControlsAuto(); }
263
+ // if pager is requested, add it
264
+ if(slider.settings.pager){ appendPager(); }
265
+ // if any control option is requested, add the controls wrapper
266
+ if(slider.settings.controls || slider.settings.autoControls || slider.settings.pager){ slider.viewport.after(slider.controls.el); }
267
+ // if ticker mode, do not allow a pager
268
+ } else {
269
+ slider.settings.pager = false;
270
+ }
271
+ // preload all images, then perform final DOM / CSS modifications that depend on images being loaded
272
+ loadElements(preloadSelector, start);
273
+ };
274
+
275
+ var loadElements = function(selector, callback){
276
+ var total = selector.find('img, iframe').length;
277
+ if(total === 0){
278
+ callback();
279
+ return;
280
+ }
281
+ var count = 0;
282
+ selector.find('img, iframe').each(function(){
283
+ $(this).one('load', function(){
284
+ if(++count === total){ callback(); }
285
+ }).each(function(){
286
+ if(this.complete){ $(this).load(); }
287
+ });
288
+ });
289
+ };
290
+
291
+ /**
292
+ * Start the slider
293
+ */
294
+ var start = function(){
295
+ // if infinite loop, prepare additional slides
296
+ if(slider.settings.infiniteLoop && slider.settings.mode !== 'fade' && !slider.settings.ticker){
297
+ var slice = slider.settings.mode === 'vertical' ? slider.settings.minSlides : slider.settings.maxSlides;
298
+ var sliceAppend = slider.children.slice(0, slice).clone(true).addClass('bx-clone');
299
+ var slicePrepend = slider.children.slice(-slice).clone(true).addClass('bx-clone');
300
+ el.append(sliceAppend).prepend(slicePrepend);
301
+ }
302
+ // remove the loading DOM element
303
+ slider.loader.remove();
304
+ // set the left / top position of "el"
305
+ setSlidePosition();
306
+ // if "vertical" mode, always use adaptiveHeight to prevent odd behavior
307
+ if(slider.settings.mode === 'vertical'){ slider.settings.adaptiveHeight = true; }
308
+ // set the viewport height
309
+ slider.viewport.height(getViewportHeight());
310
+ // make sure everything is positioned just right (same as a window resize)
311
+ el.redrawSlider();
312
+ // onSliderLoad callback
313
+ slider.settings.onSliderLoad(slider.active.index);
314
+ // slider has been fully initialized
315
+ slider.initialized = true;
316
+ // bind the resize call to the window
317
+ if(slider.settings.responsive){ $(window).bind('resize', resizeWindow); }
318
+ // if auto is true and has more than 1 page, start the show
319
+ if(slider.settings.auto && slider.settings.autoStart && (getPagerQty() > 1 || slider.settings.autoSlideForOnePage)){ initAuto(); }
320
+ // if ticker is true, start the ticker
321
+ if(slider.settings.ticker){ initTicker(); }
322
+ // if pager is requested, make the appropriate pager link active
323
+ if(slider.settings.pager){ updatePagerActive(slider.settings.startSlide); }
324
+ // check for any updates to the controls (like hideControlOnEnd updates)
325
+ if(slider.settings.controls){ updateDirectionControls(); }
326
+ // if touchEnabled is true, setup the touch events
327
+ if(slider.settings.touchEnabled && !slider.settings.ticker){ initTouch(); }
328
+ };
329
+
330
+ /**
331
+ * Returns the calculated height of the viewport, used to determine either adaptiveHeight or the maxHeight value
332
+ */
333
+ var getViewportHeight = function(){
334
+ var height = 0;
335
+ // first determine which children (slides) should be used in our height calculation
336
+ var children = $();
337
+ // if mode is not "vertical" and adaptiveHeight is false, include all children
338
+ if(slider.settings.mode !== 'vertical' && !slider.settings.adaptiveHeight){
339
+ children = slider.children;
340
+ }else{
341
+ // if not carousel, return the single active child
342
+ if(!slider.carousel){
343
+ children = slider.children.eq(slider.active.index);
344
+ // if carousel, return a slice of children
345
+ }else{
346
+ // get the individual slide index
347
+ var currentIndex = slider.settings.moveSlides === 1 ? slider.active.index : slider.active.index * getMoveBy();
348
+ // add the current slide to the children
349
+ children = slider.children.eq(currentIndex);
350
+ // cycle through the remaining "showing" slides
351
+ for (i = 1; i <= slider.settings.maxSlides - 1; i++){
352
+ // if looped back to the start
353
+ if(currentIndex + i >= slider.children.length){
354
+ children = children.add(slider.children.eq(i - 1));
355
+ }else{
356
+ children = children.add(slider.children.eq(currentIndex + i));
357
+ }
358
+ }
359
+ }
360
+ }
361
+ // if "vertical" mode, calculate the sum of the heights of the children
362
+ if(slider.settings.mode === 'vertical'){
363
+ children.each(function(index){
364
+ height += $(this).outerHeight();
365
+ });
366
+ // add user-supplied margins
367
+ if(slider.settings.slideMargin > 0){
368
+ height += slider.settings.slideMargin * (slider.settings.minSlides - 1);
369
+ }
370
+ // if not "vertical" mode, calculate the max height of the children
371
+ }else{
372
+ height = Math.max.apply(Math, children.map(function(){
373
+ return $(this).outerHeight(false);
374
+ }).get());
375
+ }
376
+
377
+ if(slider.viewport.css('box-sizing') === 'border-box'){
378
+ height += parseFloat(slider.viewport.css('padding-top')) + parseFloat(slider.viewport.css('padding-bottom')) +
379
+ parseFloat(slider.viewport.css('border-top-width')) + parseFloat(slider.viewport.css('border-bottom-width'));
380
+ }else if(slider.viewport.css('box-sizing') === 'padding-box'){
381
+ height += parseFloat(slider.viewport.css('padding-top')) + parseFloat(slider.viewport.css('padding-bottom'));
382
+ }
383
+
384
+ return height;
385
+ };
386
+
387
+ /**
388
+ * Returns the calculated width to be used for the outer wrapper / viewport
389
+ */
390
+ var getViewportMaxWidth = function(){
391
+ var width = '100%';
392
+ if(slider.settings.slideWidth > 0){
393
+ if(slider.settings.mode === 'horizontal'){
394
+ width = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
395
+ }else{
396
+ width = slider.settings.slideWidth;
397
+ }
398
+ }
399
+ return width;
400
+ };
401
+
402
+ /**
403
+ * Returns the calculated width to be applied to each slide
404
+ */
405
+ var getSlideWidth = function(){
406
+ // start with any user-supplied slide width
407
+ var newElWidth = slider.settings.slideWidth;
408
+ // get the current viewport width
409
+ var wrapWidth = slider.viewport.width();
410
+ // if slide width was not supplied, or is larger than the viewport use the viewport width
411
+ if(slider.settings.slideWidth === 0 ||
412
+ (slider.settings.slideWidth > wrapWidth && !slider.carousel) ||
413
+ slider.settings.mode === 'vertical'){
414
+ newElWidth = wrapWidth;
415
+ // if carousel, use the thresholds to determine the width
416
+ }else if(slider.settings.maxSlides > 1 && slider.settings.mode === 'horizontal'){
417
+ if(wrapWidth > slider.maxThreshold){
418
+ // newElWidth = (wrapWidth - (slider.settings.slideMargin * (slider.settings.maxSlides - 1))) / slider.settings.maxSlides;
419
+ }else if(wrapWidth < slider.minThreshold){
420
+ newElWidth = (wrapWidth - (slider.settings.slideMargin * (slider.settings.minSlides - 1))) / slider.settings.minSlides;
421
+ }
422
+ }
423
+ return newElWidth;
424
+ };
425
+
426
+ /**
427
+ * Returns the number of slides currently visible in the viewport (includes partially visible slides)
428
+ */
429
+ var getNumberSlidesShowing = function(){
430
+ var slidesShowing = 1;
431
+ if(slider.settings.mode === 'horizontal' && slider.settings.slideWidth > 0){
432
+ // if viewport is smaller than minThreshold, return minSlides
433
+ if(slider.viewport.width() < slider.minThreshold){
434
+ slidesShowing = slider.settings.minSlides;
435
+ // if viewport is larger than minThreshold, return maxSlides
436
+ }else if(slider.viewport.width() > slider.maxThreshold){
437
+ slidesShowing = slider.settings.maxSlides;
438
+ // if viewport is between min / max thresholds, divide viewport width by first child width
439
+ }else{
440
+ var childWidth = slider.children.first().width() + slider.settings.slideMargin;
441
+ slidesShowing = Math.floor((slider.viewport.width() +
442
+ slider.settings.slideMargin) / childWidth);
443
+ }
444
+ // if "vertical" mode, slides showing will always be minSlides
445
+ }else if(slider.settings.mode === 'vertical'){
446
+ slidesShowing = slider.settings.minSlides;
447
+ }
448
+ return slidesShowing;
449
+ };
450
+
451
+ /**
452
+ * Returns the number of pages (one full viewport of slides is one "page")
453
+ */
454
+ var getPagerQty = function(){
455
+ var pagerQty = 0;
456
+ // if moveSlides is specified by the user
457
+ if(slider.settings.moveSlides > 0){
458
+ if(slider.settings.infiniteLoop){
459
+ pagerQty = Math.ceil(slider.children.length / getMoveBy());
460
+ }else{
461
+ // use a while loop to determine pages
462
+ var breakPoint = 0;
463
+ var counter = 0;
464
+ // when breakpoint goes above children length, counter is the number of pages
465
+ while (breakPoint < slider.children.length){
466
+ ++pagerQty;
467
+ breakPoint = counter + getNumberSlidesShowing();
468
+ counter += slider.settings.moveSlides <= getNumberSlidesShowing() ? slider.settings.moveSlides : getNumberSlidesShowing();
469
+ }
470
+ }
471
+ // if moveSlides is 0 (auto) divide children length by sides showing, then round up
472
+ }else{
473
+ pagerQty = Math.ceil(slider.children.length / getNumberSlidesShowing());
474
+ }
475
+ return pagerQty;
476
+ };
477
+
478
+ /**
479
+ * Returns the number of individual slides by which to shift the slider
480
+ */
481
+ var getMoveBy = function(){
482
+ // if moveSlides was set by the user and moveSlides is less than number of slides showing
483
+ if(slider.settings.moveSlides > 0 && slider.settings.moveSlides <= getNumberSlidesShowing()){
484
+ return slider.settings.moveSlides;
485
+ }
486
+ // if moveSlides is 0 (auto)
487
+ return getNumberSlidesShowing();
488
+ };
489
+
490
+ /**
491
+ * Sets the slider's (el) left or top position
492
+ */
493
+ var setSlidePosition = function(){
494
+ var position;
495
+ // if last slide, not infinite loop, and number of children is larger than specified maxSlides
496
+ if(slider.children.length > slider.settings.maxSlides && slider.active.last && !slider.settings.infiniteLoop){
497
+ if(slider.settings.mode === 'horizontal'){
498
+ // get the last child's position
499
+ var lastChild = slider.children.last();
500
+ position = lastChild.position();
501
+ // set the left position
502
+ setPositionProperty(-(position.left - (slider.viewport.width() - lastChild.outerWidth())), 'reset', 0);
503
+ }else if(slider.settings.mode === 'vertical'){
504
+ // get the last showing index's position
505
+ var lastShowingIndex = slider.children.length - slider.settings.minSlides;
506
+ position = slider.children.eq(lastShowingIndex).position();
507
+ // set the top position
508
+ setPositionProperty(-position.top, 'reset', 0);
509
+ }
510
+ // if not last slide
511
+ }else{
512
+ // get the position of the first showing slide
513
+ position = slider.children.eq(slider.active.index * getMoveBy()).position();
514
+ // check for last slide
515
+ if(slider.active.index === getPagerQty() - 1){ slider.active.last = true; }
516
+ // set the respective position
517
+ if(position !== undefined){
518
+ if(slider.settings.mode === 'horizontal'){ setPositionProperty(-position.left, 'reset', 0); }
519
+ else if(slider.settings.mode === 'vertical'){ setPositionProperty(-position.top, 'reset', 0); }
520
+ }
521
+ }
522
+ };
523
+
524
+ /**
525
+ * Sets the el's animating property position (which in turn will sometimes animate el).
526
+ * If using CSS, sets the transform property. If not using CSS, sets the top / left property.
527
+ *
528
+ * @param value (int)
529
+ * - the animating property's value
530
+ *
531
+ * @param type (string) 'slider', 'reset', 'ticker'
532
+ * - the type of instance for which the function is being
533
+ *
534
+ * @param duration (int)
535
+ * - the amount of time (in ms) the transition should occupy
536
+ *
537
+ * @param params (array) optional
538
+ * - an optional parameter containing any variables that need to be passed in
539
+ */
540
+ var setPositionProperty = function(value, type, duration, params){
541
+ // use CSS transform
542
+ if(slider.usingCSS){
543
+ // determine the translate3d value
544
+ var propValue = slider.settings.mode === 'vertical' ? 'translate3d(0, ' + value + 'px, 0)' : 'translate3d(' + value + 'px, 0, 0)';
545
+ // add the CSS transition-duration
546
+ el.css('-' + slider.cssPrefix + '-transition-duration', duration / 1000 + 's');
547
+ if(type === 'slide'){
548
+ // set the property value
549
+ el.css(slider.animProp, propValue);
550
+ // bind a callback method - executes when CSS transition completes
551
+ el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
552
+ // unbind the callback
553
+ el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
554
+ updateAfterSlideTransition();
555
+ });
556
+ }else if(type === 'reset'){
557
+ el.css(slider.animProp, propValue);
558
+ }else if(type === 'ticker'){
559
+ // make the transition use 'linear'
560
+ el.css('-' + slider.cssPrefix + '-transition-timing-function', 'linear');
561
+ el.css(slider.animProp, propValue);
562
+ // bind a callback method - executes when CSS transition completes
563
+ el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
564
+ // unbind the callback
565
+ el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
566
+ // reset the position
567
+ setPositionProperty(params.resetValue, 'reset', 0);
568
+ // start the loop again
569
+ tickerLoop();
570
+ });
571
+ }
572
+ // use JS animate
573
+ }else{
574
+ var animateObj = {};
575
+ animateObj[slider.animProp] = value;
576
+ if(type === 'slide'){
577
+ el.animate(animateObj, duration, slider.settings.easing, function(){
578
+ updateAfterSlideTransition();
579
+ });
580
+ }else if(type === 'reset'){
581
+ el.css(slider.animProp, value);
582
+ }else if(type === 'ticker'){
583
+ el.animate(animateObj, speed, 'linear', function(){
584
+ setPositionProperty(params.resetValue, 'reset', 0);
585
+ // run the recursive loop after animation
586
+ tickerLoop();
587
+ });
588
+ }
589
+ }
590
+ };
591
+
592
+ /**
593
+ * Populates the pager with proper amount of pages
594
+ */
595
+ var populatePager = function(){
596
+ var pagerHtml = '';
597
+ var pagerQty = getPagerQty();
598
+ // loop through each pager item
599
+ for(var i=0; i < pagerQty; i++){
600
+ var linkContent = '';
601
+ // if a buildPager function is supplied, use it to get pager link value, else use index + 1
602
+ if(slider.settings.buildPager && $.isFunction(slider.settings.buildPager) || slider.settings.pagerCustom){
603
+ linkContent = slider.settings.buildPager(i);
604
+ slider.pagerEl.addClass('bx-custom-pager');
605
+ }else{
606
+ linkContent = i + 1;
607
+ slider.pagerEl.addClass('bx-default-pager');
608
+ }
609
+ // var linkContent = slider.settings.buildPager && $.isFunction(slider.settings.buildPager) ? slider.settings.buildPager(i) : i + 1;
610
+ // add the markup to the string
611
+ pagerHtml += '<div class="bx-pager-item"><a href="" data-slide-index="' + i + '" class="bx-pager-link">' + linkContent + '</a></div>';
612
+ }
613
+ // populate the pager element with pager links
614
+ slider.pagerEl.html(pagerHtml);
615
+ };
616
+
617
+ /**
618
+ * Appends the pager to the controls element
619
+ */
620
+ var appendPager = function(){
621
+ if(!slider.settings.pagerCustom){
622
+ // create the pager DOM element
623
+ slider.pagerEl = $('<div class="bx-pager" />');
624
+ // if a pager selector was supplied, populate it with the pager
625
+ if(slider.settings.pagerSelector){
626
+ $(slider.settings.pagerSelector).html(slider.pagerEl);
627
+ // if no pager selector was supplied, add it after the wrapper
628
+ }else{
629
+ slider.controls.el.addClass('bx-has-pager').append(slider.pagerEl);
630
+ }
631
+ // populate the pager
632
+ populatePager();
633
+ }else{
634
+ slider.pagerEl = $(slider.settings.pagerCustom);
635
+ }
636
+ // assign the pager click binding
637
+ slider.pagerEl.on('click', 'a', clickPagerBind);
638
+ };
639
+
640
+ /**
641
+ * Appends prev / next controls to the controls element
642
+ */
643
+ var appendControls = function(){
644
+ slider.controls.next = $('<a class="bx-next" href="">' + slider.settings.nextText + '</a>');
645
+ slider.controls.prev = $('<a class="bx-prev" href="">' + slider.settings.prevText + '</a>');
646
+ // bind click actions to the controls
647
+ slider.controls.next.bind('click', clickNextBind);
648
+ slider.controls.prev.bind('click', clickPrevBind);
649
+ // if nextSelector was supplied, populate it
650
+ if(slider.settings.nextSelector){
651
+ $(slider.settings.nextSelector).append(slider.controls.next);
652
+ }
653
+ // if prevSelector was supplied, populate it
654
+ if(slider.settings.prevSelector){
655
+ $(slider.settings.prevSelector).append(slider.controls.prev);
656
+ }
657
+ // if no custom selectors were supplied
658
+ if(!slider.settings.nextSelector && !slider.settings.prevSelector){
659
+ // add the controls to the DOM
660
+ slider.controls.directionEl = $('<div class="bx-controls-direction" />');
661
+ // add the control elements to the directionEl
662
+ slider.controls.directionEl.append(slider.controls.prev).append(slider.controls.next);
663
+ // slider.viewport.append(slider.controls.directionEl);
664
+ slider.controls.el.addClass('bx-has-controls-direction').append(slider.controls.directionEl);
665
+ }
666
+ };
667
+
668
+ /**
669
+ * Appends start / stop auto controls to the controls element
670
+ */
671
+ var appendControlsAuto = function(){
672
+ slider.controls.start = $('<div class="bx-controls-auto-item"><a class="bx-start" href="">' + slider.settings.startText + '</a></div>');
673
+ slider.controls.stop = $('<div class="bx-controls-auto-item"><a class="bx-stop" href="">' + slider.settings.stopText + '</a></div>');
674
+ // add the controls to the DOM
675
+ slider.controls.autoEl = $('<div class="bx-controls-auto" />');
676
+ // bind click actions to the controls
677
+ slider.controls.autoEl.on('click', '.bx-start', clickStartBind);
678
+ slider.controls.autoEl.on('click', '.bx-stop', clickStopBind);
679
+ // if autoControlsCombine, insert only the "start" control
680
+ if(slider.settings.autoControlsCombine){
681
+ slider.controls.autoEl.append(slider.controls.start);
682
+ // if autoControlsCombine is false, insert both controls
683
+ }else{
684
+ slider.controls.autoEl.append(slider.controls.start).append(slider.controls.stop);
685
+ }
686
+ // if auto controls selector was supplied, populate it with the controls
687
+ if(slider.settings.autoControlsSelector){
688
+ $(slider.settings.autoControlsSelector).html(slider.controls.autoEl);
689
+ // if auto controls selector was not supplied, add it after the wrapper
690
+ }else{
691
+ slider.controls.el.addClass('bx-has-controls-auto').append(slider.controls.autoEl);
692
+ }
693
+ // update the auto controls
694
+ updateAutoControls(slider.settings.autoStart ? 'stop' : 'start');
695
+ };
696
+
697
+ /**
698
+ * Appends image captions to the DOM
699
+ */
700
+ var appendCaptions = function(){
701
+ // cycle through each child
702
+ slider.children.each(function(index){
703
+ // get the image title attribute
704
+ var title = $(this).find('img:first').attr('title');
705
+ // append the caption
706
+ if(title !== undefined && ('' + title).length){
702
707
  $(this).append('<div class="bx-caption"><span>' + title + '</span></div>');
703
708
  }
704
- });
705
- }
706
-
707
- /**
708
- * Click next binding
709
- *
710
- * @param e (event)
711
- * - DOM event object
712
- */
713
- var clickNextBind = function(e){
714
- // if auto show is running, stop it
715
- if (slider.settings.auto) el.stopAuto();
716
- el.goToNextSlide();
717
- e.preventDefault();
718
- }
719
-
720
- /**
721
- * Click prev binding
722
- *
723
- * @param e (event)
724
- * - DOM event object
725
- */
726
- var clickPrevBind = function(e){
727
- // if auto show is running, stop it
728
- if (slider.settings.auto) el.stopAuto();
729
- el.goToPrevSlide();
730
- e.preventDefault();
731
- }
732
-
733
- /**
734
- * Click start binding
735
- *
736
- * @param e (event)
737
- * - DOM event object
738
- */
739
- var clickStartBind = function(e){
740
- el.startAuto();
741
- e.preventDefault();
742
- }
743
-
744
- /**
745
- * Click stop binding
746
- *
747
- * @param e (event)
748
- * - DOM event object
749
- */
750
- var clickStopBind = function(e){
751
- el.stopAuto();
752
- e.preventDefault();
753
- }
754
-
755
- /**
756
- * Click pager binding
757
- *
758
- * @param e (event)
759
- * - DOM event object
760
- */
761
- var clickPagerBind = function(e){
762
- // if auto show is running, stop it
763
- if (slider.settings.auto) el.stopAuto();
764
- var pagerLink = $(e.currentTarget);
765
- if(pagerLink.attr('data-slide-index') !== undefined){
766
- var pagerIndex = parseInt(pagerLink.attr('data-slide-index'));
767
- // if clicked pager link is not active, continue with the goToSlide call
768
- if(pagerIndex != slider.active.index) el.goToSlide(pagerIndex);
769
- e.preventDefault();
770
- }
771
- }
772
-
773
- /**
774
- * Updates the pager links with an active class
775
- *
776
- * @param slideIndex (int)
777
- * - index of slide to make active
778
- */
779
- var updatePagerActive = function(slideIndex){
780
- // if "short" pager type
781
- var len = slider.children.length; // nb of children
782
- if(slider.settings.pagerType == 'short'){
783
- if(slider.settings.maxSlides > 1) {
784
- len = Math.ceil(slider.children.length/slider.settings.maxSlides);
785
- }
786
- slider.pagerEl.html( (slideIndex + 1) + slider.settings.pagerShortSeparator + len);
787
- return;
788
- }
789
- // remove all pager active classes
790
- slider.pagerEl.find('a').removeClass('active');
791
- // apply the active class for all pagers
792
- slider.pagerEl.each(function(i, el) { $(el).find('a').eq(slideIndex).addClass('active'); });
793
- }
794
-
795
- /**
796
- * Performs needed actions after a slide transition
797
- */
798
- var updateAfterSlideTransition = function(){
799
- // if infinte loop is true
800
- if(slider.settings.infiniteLoop){
801
- var position = '';
802
- // first slide
803
- if(slider.active.index == 0){
804
- // set the new position
805
- position = slider.children.eq(0).position();
806
- // carousel, last slide
807
- }else if(slider.active.index == getPagerQty() - 1 && slider.carousel){
808
- position = slider.children.eq((getPagerQty() - 1) * getMoveBy()).position();
809
- // last slide
810
- }else if(slider.active.index == slider.children.length - 1){
811
- position = slider.children.eq(slider.children.length - 1).position();
812
- }
813
- if(position){
814
- if (slider.settings.mode == 'horizontal') { setPositionProperty(-position.left, 'reset', 0); }
815
- else if (slider.settings.mode == 'vertical') { setPositionProperty(-position.top, 'reset', 0); }
816
- }
817
- }
818
- // declare that the transition is complete
819
- slider.working = false;
820
- // onSlideAfter callback
821
- slider.settings.onSlideAfter(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
822
- }
823
-
824
- /**
825
- * Updates the auto controls state (either active, or combined switch)
826
- *
827
- * @param state (string) "start", "stop"
828
- * - the new state of the auto show
829
- */
830
- var updateAutoControls = function(state){
831
- // if autoControlsCombine is true, replace the current control with the new state
832
- if(slider.settings.autoControlsCombine){
833
- slider.controls.autoEl.html(slider.controls[state]);
834
- // if autoControlsCombine is false, apply the "active" class to the appropriate control
835
- }else{
836
- slider.controls.autoEl.find('a').removeClass('active');
837
- slider.controls.autoEl.find('a:not(.bx-' + state + ')').addClass('active');
838
- }
839
- }
840
-
841
- /**
842
- * Updates the direction controls (checks if either should be hidden)
843
- */
844
- var updateDirectionControls = function(){
845
- if(getPagerQty() == 1){
846
- slider.controls.prev.addClass('disabled');
847
- slider.controls.next.addClass('disabled');
848
- }else if(!slider.settings.infiniteLoop && slider.settings.hideControlOnEnd){
849
- // if first slide
850
- if (slider.active.index == 0){
851
- slider.controls.prev.addClass('disabled');
852
- slider.controls.next.removeClass('disabled');
853
- // if last slide
854
- }else if(slider.active.index == getPagerQty() - 1){
855
- slider.controls.next.addClass('disabled');
856
- slider.controls.prev.removeClass('disabled');
857
- // if any slide in the middle
858
- }else{
859
- slider.controls.prev.removeClass('disabled');
860
- slider.controls.next.removeClass('disabled');
861
- }
862
- }
863
- }
864
-
865
- /**
866
- * Initialzes the auto process
867
- */
868
- var initAuto = function(){
869
- // if autoDelay was supplied, launch the auto show using a setTimeout() call
870
- if(slider.settings.autoDelay > 0){
871
- var timeout = setTimeout(el.startAuto, slider.settings.autoDelay);
872
- // if autoDelay was not supplied, start the auto show normally
873
- }else{
874
- el.startAuto();
875
- }
876
- // if autoHover is requested
877
- if(slider.settings.autoHover){
878
- // on el hover
879
- el.hover(function(){
880
- // if the auto show is currently playing (has an active interval)
881
- if(slider.interval){
882
- // stop the auto show and pass true agument which will prevent control update
883
- el.stopAuto(true);
884
- // create a new autoPaused value which will be used by the relative "mouseout" event
885
- slider.autoPaused = true;
886
- }
887
- }, function(){
888
- // if the autoPaused value was created be the prior "mouseover" event
889
- if(slider.autoPaused){
890
- // start the auto show and pass true agument which will prevent control update
891
- el.startAuto(true);
892
- // reset the autoPaused value
893
- slider.autoPaused = null;
894
- }
895
- });
896
- }
897
- }
898
-
899
- /**
900
- * Initialzes the ticker process
901
- */
902
- var initTicker = function(){
903
- var startPosition = 0;
904
- // if autoDirection is "next", append a clone of the entire slider
905
- if(slider.settings.autoDirection == 'next'){
906
- el.append(slider.children.clone().addClass('bx-clone'));
907
- // if autoDirection is "prev", prepend a clone of the entire slider, and set the left position
908
- }else{
909
- el.prepend(slider.children.clone().addClass('bx-clone'));
910
- var position = slider.children.first().position();
911
- startPosition = slider.settings.mode == 'horizontal' ? -position.left : -position.top;
912
- }
913
- setPositionProperty(startPosition, 'reset', 0);
914
- // do not allow controls in ticker mode
915
- slider.settings.pager = false;
916
- slider.settings.controls = false;
917
- slider.settings.autoControls = false;
918
- // if autoHover is requested
919
- if(slider.settings.tickerHover && !slider.usingCSS){
920
- // on el hover
921
- slider.viewport.hover(function(){
922
- el.stop();
923
- }, function(){
924
- // calculate the total width of children (used to calculate the speed ratio)
925
- var totalDimens = 0;
926
- slider.children.each(function(index){
927
- totalDimens += slider.settings.mode == 'horizontal' ? $(this).outerWidth(true) : $(this).outerHeight(true);
928
- });
929
- // calculate the speed ratio (used to determine the new speed to finish the paused animation)
930
- var ratio = slider.settings.speed / totalDimens;
931
- // determine which property to use
932
- var property = slider.settings.mode == 'horizontal' ? 'left' : 'top';
933
- // calculate the new speed
934
- var newSpeed = ratio * (totalDimens - (Math.abs(parseInt(el.css(property)))));
935
- tickerLoop(newSpeed);
936
- });
937
- }
938
- // start the ticker loop
939
- tickerLoop();
940
- }
941
-
942
- /**
943
- * Runs a continuous loop, news ticker-style
944
- */
945
- var tickerLoop = function(resumeSpeed){
946
- speed = resumeSpeed ? resumeSpeed : slider.settings.speed;
947
- var position = {left: 0, top: 0};
948
- var reset = {left: 0, top: 0};
949
- // if "next" animate left position to last child, then reset left to 0
950
- if(slider.settings.autoDirection == 'next'){
951
- position = el.find('.bx-clone').first().position();
952
- // if "prev" animate left position to 0, then reset left to first non-clone child
953
- }else{
954
- reset = slider.children.first().position();
955
- }
956
- var animateProperty = slider.settings.mode == 'horizontal' ? -position.left : -position.top;
957
- var resetValue = slider.settings.mode == 'horizontal' ? -reset.left : -reset.top;
958
- var params = {resetValue: resetValue};
959
- setPositionProperty(animateProperty, 'ticker', speed, params);
960
- }
961
-
962
- /**
963
- * Initializes touch events
964
- */
965
- var initTouch = function(){
966
- // initialize object to contain all touch values
967
- slider.touch = {
968
- start: {x: 0, y: 0},
969
- end: {x: 0, y: 0}
970
- }
971
- slider.viewport.bind('touchstart', onTouchStart);
972
- }
973
-
974
- /**
975
- * Event handler for "touchstart"
976
- *
977
- * @param e (event)
978
- * - DOM event object
979
- */
980
- var onTouchStart = function(e){
981
- if(slider.working){
982
- e.preventDefault();
983
- }else{
984
- // record the original position when touch starts
985
- slider.touch.originalPos = el.position();
986
- var orig = e.originalEvent;
987
- // record the starting touch x, y coordinates
988
- slider.touch.start.x = orig.changedTouches[0].pageX;
989
- slider.touch.start.y = orig.changedTouches[0].pageY;
990
- // bind a "touchmove" event to the viewport
991
- slider.viewport.bind('touchmove', onTouchMove);
992
- // bind a "touchend" event to the viewport
993
- slider.viewport.bind('touchend', onTouchEnd);
994
- }
995
- }
996
-
997
- /**
998
- * Event handler for "touchmove"
999
- *
1000
- * @param e (event)
1001
- * - DOM event object
1002
- */
1003
- var onTouchMove = function(e){
1004
- var orig = e.originalEvent;
1005
- // if scrolling on y axis, do not prevent default
1006
- var xMovement = Math.abs(orig.changedTouches[0].pageX - slider.touch.start.x);
1007
- var yMovement = Math.abs(orig.changedTouches[0].pageY - slider.touch.start.y);
1008
- // x axis swipe
1009
- if((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX){
1010
- e.preventDefault();
1011
- // y axis swipe
1012
- }else if((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY){
1013
- e.preventDefault();
1014
- }
1015
- if(slider.settings.mode != 'fade' && slider.settings.oneToOneTouch){
1016
- var value = 0;
1017
- // if horizontal, drag along x axis
1018
- if(slider.settings.mode == 'horizontal'){
1019
- var change = orig.changedTouches[0].pageX - slider.touch.start.x;
1020
- value = slider.touch.originalPos.left + change;
1021
- // if vertical, drag along y axis
1022
- }else{
1023
- var change = orig.changedTouches[0].pageY - slider.touch.start.y;
1024
- value = slider.touch.originalPos.top + change;
1025
- }
1026
- setPositionProperty(value, 'reset', 0);
1027
- }
1028
- }
1029
-
1030
- /**
1031
- * Event handler for "touchend"
1032
- *
1033
- * @param e (event)
1034
- * - DOM event object
1035
- */
1036
- var onTouchEnd = function(e){
1037
- slider.viewport.unbind('touchmove', onTouchMove);
1038
- var orig = e.originalEvent;
1039
- var value = 0;
1040
- // record end x, y positions
1041
- slider.touch.end.x = orig.changedTouches[0].pageX;
1042
- slider.touch.end.y = orig.changedTouches[0].pageY;
1043
- // if fade mode, check if absolute x distance clears the threshold
1044
- if(slider.settings.mode == 'fade'){
1045
- var distance = Math.abs(slider.touch.start.x - slider.touch.end.x);
1046
- if(distance >= slider.settings.swipeThreshold){
1047
- slider.touch.start.x > slider.touch.end.x ? el.goToNextSlide() : el.goToPrevSlide();
1048
- el.stopAuto();
1049
- }
1050
- // not fade mode
1051
- }else{
1052
- var distance = 0;
1053
- // calculate distance and el's animate property
1054
- if(slider.settings.mode == 'horizontal'){
1055
- distance = slider.touch.end.x - slider.touch.start.x;
1056
- value = slider.touch.originalPos.left;
1057
- }else{
1058
- distance = slider.touch.end.y - slider.touch.start.y;
1059
- value = slider.touch.originalPos.top;
1060
- }
1061
- // if not infinite loop and first / last slide, do not attempt a slide transition
1062
- if(!slider.settings.infiniteLoop && ((slider.active.index == 0 && distance > 0) || (slider.active.last && distance < 0))){
1063
- setPositionProperty(value, 'reset', 200);
1064
- }else{
1065
- // check if distance clears threshold
1066
- if(Math.abs(distance) >= slider.settings.swipeThreshold){
1067
- distance < 0 ? el.goToNextSlide() : el.goToPrevSlide();
1068
- el.stopAuto();
1069
- }else{
1070
- // el.animate(property, 200);
1071
- setPositionProperty(value, 'reset', 200);
1072
- }
1073
- }
1074
- }
1075
- slider.viewport.unbind('touchend', onTouchEnd);
1076
- }
1077
-
1078
- /**
1079
- * Window resize event callback
1080
- */
1081
- var resizeWindow = function(e){
1082
- // don't do anything if slider isn't initialized.
1083
- if(!slider.initialized) return;
1084
- // get the new window dimens (again, thank you IE)
1085
- var windowWidthNew = $(window).width();
1086
- var windowHeightNew = $(window).height();
1087
- // make sure that it is a true window resize
1088
- // *we must check this because our dinosaur friend IE fires a window resize event when certain DOM elements
1089
- // are resized. Can you just die already?*
1090
- if(windowWidth != windowWidthNew || windowHeight != windowHeightNew){
1091
- // set the new window dimens
1092
- windowWidth = windowWidthNew;
1093
- windowHeight = windowHeightNew;
1094
- // update all dynamic elements
1095
- el.redrawSlider();
1096
- // Call user resize handler
1097
- slider.settings.onSliderResize.call(el, slider.active.index);
1098
- }
1099
- }
1100
-
1101
- /**
1102
- * ===================================================================================
1103
- * = PUBLIC FUNCTIONS
1104
- * ===================================================================================
1105
- */
1106
-
1107
- /**
1108
- * Performs slide transition to the specified slide
1109
- *
1110
- * @param slideIndex (int)
1111
- * - the destination slide's index (zero-based)
1112
- *
1113
- * @param direction (string)
1114
- * - INTERNAL USE ONLY - the direction of travel ("prev" / "next")
1115
- */
1116
- el.goToSlide = function(slideIndex, direction){
1117
- // if plugin is currently in motion, ignore request
1118
- if(slider.working || slider.active.index == slideIndex) return;
1119
- // declare that plugin is in motion
1120
- slider.working = true;
1121
- // store the old index
1122
- slider.oldIndex = slider.active.index;
1123
- // if slideIndex is less than zero, set active index to last child (this happens during infinite loop)
1124
- if(slideIndex < 0){
1125
- slider.active.index = getPagerQty() - 1;
1126
- // if slideIndex is greater than children length, set active index to 0 (this happens during infinite loop)
1127
- }else if(slideIndex >= getPagerQty()){
1128
- slider.active.index = 0;
1129
- // set active index to requested slide
1130
- }else{
1131
- slider.active.index = slideIndex;
1132
- }
1133
- // onSlideBefore, onSlideNext, onSlidePrev callbacks
1134
- slider.settings.onSlideBefore(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
1135
- if(direction == 'next'){
1136
- slider.settings.onSlideNext(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
1137
- }else if(direction == 'prev'){
1138
- slider.settings.onSlidePrev(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
1139
- }
1140
- // check if last slide
1141
- slider.active.last = slider.active.index >= getPagerQty() - 1;
1142
- // update the pager with active class
1143
- if(slider.settings.pager) updatePagerActive(slider.active.index);
1144
- // // check for direction control update
1145
- if(slider.settings.controls) updateDirectionControls();
1146
- // if slider is set to mode: "fade"
1147
- if(slider.settings.mode == 'fade'){
1148
- // if adaptiveHeight is true and next height is different from current height, animate to the new height
1149
- if(slider.settings.adaptiveHeight && slider.viewport.height() != getViewportHeight()){
1150
- slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
1151
- }
1152
- // fade out the visible child and reset its z-index value
1153
- slider.children.filter(':visible').fadeOut(slider.settings.speed).css({zIndex: 0});
1154
- // fade in the newly requested slide
1155
- slider.children.eq(slider.active.index).css('zIndex', slider.settings.slideZIndex+1).fadeIn(slider.settings.speed, function(){
1156
- $(this).css('zIndex', slider.settings.slideZIndex);
1157
- updateAfterSlideTransition();
1158
- });
1159
- // slider mode is not "fade"
1160
- }else{
1161
- // if adaptiveHeight is true and next height is different from current height, animate to the new height
1162
- if(slider.settings.adaptiveHeight && slider.viewport.height() != getViewportHeight()){
1163
- slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
1164
- }
1165
- var moveBy = 0;
1166
- var position = {left: 0, top: 0};
1167
- // if carousel and not infinite loop
1168
- if(!slider.settings.infiniteLoop && slider.carousel && slider.active.last){
1169
- if(slider.settings.mode == 'horizontal'){
1170
- // get the last child position
1171
- var lastChild = slider.children.eq(slider.children.length - 1);
1172
- position = lastChild.position();
1173
- // calculate the position of the last slide
1174
- moveBy = slider.viewport.width() - lastChild.outerWidth();
1175
- }else{
1176
- // get last showing index position
1177
- var lastShowingIndex = slider.children.length - slider.settings.minSlides;
1178
- position = slider.children.eq(lastShowingIndex).position();
1179
- }
1180
- // horizontal carousel, going previous while on first slide (infiniteLoop mode)
1181
- }else if(slider.carousel && slider.active.last && direction == 'prev'){
1182
- // get the last child position
1183
- var eq = slider.settings.moveSlides == 1 ? slider.settings.maxSlides - getMoveBy() : ((getPagerQty() - 1) * getMoveBy()) - (slider.children.length - slider.settings.maxSlides);
1184
- var lastChild = el.children('.bx-clone').eq(eq);
1185
- position = lastChild.position();
1186
- // if infinite loop and "Next" is clicked on the last slide
1187
- }else if(direction == 'next' && slider.active.index == 0){
1188
- // get the last clone position
1189
- position = el.find('> .bx-clone').eq(slider.settings.maxSlides).position();
1190
- slider.active.last = false;
1191
- // normal non-zero requests
1192
- }else if(slideIndex >= 0){
1193
- var requestEl = slideIndex * getMoveBy();
1194
- position = slider.children.eq(requestEl).position();
1195
- }
1196
-
1197
- /* If the position doesn't exist
1198
- * (e.g. if you destroy the slider on a next click),
1199
- * it doesn't throw an error.
1200
- */
1201
- if ("undefined" !== typeof(position)) {
1202
- var value = slider.settings.mode == 'horizontal' ? -(position.left - moveBy) : -position.top;
1203
- // plugin values to be animated
1204
- setPositionProperty(value, 'slide', slider.settings.speed);
1205
- }
1206
- }
1207
- }
1208
-
1209
- /**
1210
- * Transitions to the next slide in the show
1211
- */
1212
- el.goToNextSlide = function(){
1213
- // if infiniteLoop is false and last page is showing, disregard call
1214
- if (!slider.settings.infiniteLoop && slider.active.last) return;
1215
- var pagerIndex = parseInt(slider.active.index) + 1;
1216
- el.goToSlide(pagerIndex, 'next');
1217
- }
1218
-
1219
- /**
1220
- * Transitions to the prev slide in the show
1221
- */
1222
- el.goToPrevSlide = function(){
1223
- // if infiniteLoop is false and last page is showing, disregard call
1224
- if (!slider.settings.infiniteLoop && slider.active.index == 0) return;
1225
- var pagerIndex = parseInt(slider.active.index) - 1;
1226
- el.goToSlide(pagerIndex, 'prev');
1227
- }
1228
-
1229
- /**
1230
- * Starts the auto show
1231
- *
1232
- * @param preventControlUpdate (boolean)
1233
- * - if true, auto controls state will not be updated
1234
- */
1235
- el.startAuto = function(preventControlUpdate){
1236
- // if an interval already exists, disregard call
1237
- if(slider.interval) return;
1238
- // create an interval
1239
- slider.interval = setInterval(function(){
1240
- slider.settings.autoDirection == 'next' ? el.goToNextSlide() : el.goToPrevSlide();
1241
- }, slider.settings.pause);
1242
- // if auto controls are displayed and preventControlUpdate is not true
1243
- if (slider.settings.autoControls && preventControlUpdate != true) updateAutoControls('stop');
1244
- }
1245
-
1246
- /**
1247
- * Stops the auto show
1248
- *
1249
- * @param preventControlUpdate (boolean)
1250
- * - if true, auto controls state will not be updated
1251
- */
1252
- el.stopAuto = function(preventControlUpdate){
1253
- // if no interval exists, disregard call
1254
- if(!slider.interval) return;
1255
- // clear the interval
1256
- clearInterval(slider.interval);
1257
- slider.interval = null;
1258
- // if auto controls are displayed and preventControlUpdate is not true
1259
- if (slider.settings.autoControls && preventControlUpdate != true) updateAutoControls('start');
1260
- }
1261
-
1262
- /**
1263
- * Returns current slide index (zero-based)
1264
- */
1265
- el.getCurrentSlide = function(){
1266
- return slider.active.index;
1267
- }
1268
-
1269
- /**
1270
- * Returns current slide element
1271
- */
1272
- el.getCurrentSlideElement = function(){
1273
- return slider.children.eq(slider.active.index);
1274
- }
1275
-
1276
- /**
1277
- * Returns number of slides in show
1278
- */
1279
- el.getSlideCount = function(){
1280
- return slider.children.length;
1281
- }
1282
-
1283
- /**
1284
- * Update all dynamic slider elements
1285
- */
1286
- el.redrawSlider = function(){
1287
- // resize all children in ratio to new screen size
1288
- slider.children.add(el.find('.bx-clone')).width(getSlideWidth());
1289
- // adjust the height
1290
- slider.viewport.css('height', getViewportHeight());
1291
- // update the slide position
1292
- if(!slider.settings.ticker) setSlidePosition();
1293
- // if active.last was true before the screen resize, we want
1294
- // to keep it last no matter what screen size we end on
1295
- if (slider.active.last) slider.active.index = getPagerQty() - 1;
1296
- // if the active index (page) no longer exists due to the resize, simply set the index as last
1297
- if (slider.active.index >= getPagerQty()) slider.active.last = true;
1298
- // if a pager is being displayed and a custom pager is not being used, update it
1299
- if(slider.settings.pager && !slider.settings.pagerCustom){
1300
- populatePager();
1301
- updatePagerActive(slider.active.index);
1302
- }
1303
- }
1304
-
1305
- /**
1306
- * Destroy the current instance of the slider (revert everything back to original state)
1307
- */
1308
- el.destroySlider = function(){
1309
- // don't do anything if slider has already been destroyed
1310
- if(!slider.initialized) return;
1311
- slider.initialized = false;
1312
- $('.bx-clone', this).remove();
1313
- slider.children.each(function() {
1314
- $(this).data("origStyle") != undefined ? $(this).attr("style", $(this).data("origStyle")) : $(this).removeAttr('style');
1315
- });
1316
- $(this).data("origStyle") != undefined ? this.attr("style", $(this).data("origStyle")) : $(this).removeAttr('style');
1317
- $(this).unwrap().unwrap();
1318
- if(slider.controls.el) slider.controls.el.remove();
1319
- if(slider.controls.next) slider.controls.next.remove();
1320
- if(slider.controls.prev) slider.controls.prev.remove();
1321
- if(slider.pagerEl && slider.settings.controls) slider.pagerEl.remove();
1322
- $('.bx-caption', this).remove();
1323
- if(slider.controls.autoEl) slider.controls.autoEl.remove();
1324
- clearInterval(slider.interval);
1325
- if(slider.settings.responsive) $(window).unbind('resize', resizeWindow);
1326
- }
1327
-
709
+ });
710
+ };
711
+
712
+ /**
713
+ * Click next binding
714
+ *
715
+ * @param e (event)
716
+ * - DOM event object
717
+ */
718
+ var clickNextBind = function(e){
719
+ // if auto show is running, stop it
720
+ if(slider.settings.auto){ el.stopAuto(); }
721
+ el.goToNextSlide();
722
+ e.preventDefault();
723
+ };
724
+
725
+ /**
726
+ * Click prev binding
727
+ *
728
+ * @param e (event)
729
+ * - DOM event object
730
+ */
731
+ var clickPrevBind = function(e){
732
+ // if auto show is running, stop it
733
+ if(slider.settings.auto){ el.stopAuto(); }
734
+ el.goToPrevSlide();
735
+ e.preventDefault();
736
+ };
737
+
738
+ /**
739
+ * Click start binding
740
+ *
741
+ * @param e (event)
742
+ * - DOM event object
743
+ */
744
+ var clickStartBind = function(e){
745
+ el.startAuto();
746
+ e.preventDefault();
747
+ };
748
+
749
+ /**
750
+ * Click stop binding
751
+ *
752
+ * @param e (event)
753
+ * - DOM event object
754
+ */
755
+ var clickStopBind = function(e){
756
+ el.stopAuto();
757
+ e.preventDefault();
758
+ };
759
+
760
+ /**
761
+ * Click pager binding
762
+ *
763
+ * @param e (event)
764
+ * - DOM event object
765
+ */
766
+ var clickPagerBind = function(e){
767
+ // if auto show is running, stop it
768
+ if(slider.settings.auto){ el.stopAuto(); }
769
+ var pagerLink = $(e.currentTarget);
770
+ if(pagerLink.attr('data-slide-index') !== undefined){
771
+ var pagerIndex = parseInt(pagerLink.attr('data-slide-index'));
772
+ // if clicked pager link is not active, continue with the goToSlide call
773
+ if(pagerIndex !== slider.active.index){ el.goToSlide(pagerIndex); }
774
+ e.preventDefault();
775
+ }
776
+ };
777
+
778
+ /**
779
+ * Updates the pager links with an active class
780
+ *
781
+ * @param slideIndex (int)
782
+ * - index of slide to make active
783
+ */
784
+ var updatePagerActive = function(slideIndex){
785
+ // if "short" pager type
786
+ var len = slider.children.length; // nb of children
787
+ if(slider.settings.pagerType === 'short'){
788
+ if(slider.settings.maxSlides > 1){
789
+ len = Math.ceil(slider.children.length/slider.settings.maxSlides);
790
+ }
791
+ slider.pagerEl.html( (slideIndex + 1) + slider.settings.pagerShortSeparator + len);
792
+ return;
793
+ }
794
+ // remove all pager active classes
795
+ slider.pagerEl.find('a').removeClass('active');
796
+ // apply the active class for all pagers
797
+ slider.pagerEl.each(function(i, el){ $(el).find('a').eq(slideIndex).addClass('active'); });
798
+ };
799
+
800
+ /**
801
+ * Performs needed actions after a slide transition
802
+ */
803
+ var updateAfterSlideTransition = function(){
804
+ // if infinite loop is true
805
+ if(slider.settings.infiniteLoop){
806
+ var position = '';
807
+ // first slide
808
+ if(slider.active.index === 0){
809
+ // set the new position
810
+ position = slider.children.eq(0).position();
811
+ // carousel, last slide
812
+ }else if(slider.active.index === getPagerQty() - 1 && slider.carousel){
813
+ position = slider.children.eq((getPagerQty() - 1) * getMoveBy()).position();
814
+ // last slide
815
+ }else if(slider.active.index === slider.children.length - 1){
816
+ position = slider.children.eq(slider.children.length - 1).position();
817
+ }
818
+ if(position){
819
+ if(slider.settings.mode === 'horizontal'){ setPositionProperty(-position.left, 'reset', 0); }
820
+ else if(slider.settings.mode === 'vertical'){ setPositionProperty(-position.top, 'reset', 0); }
821
+ }
822
+ }
823
+ // declare that the transition is complete
824
+ slider.working = false;
825
+ // onSlideAfter callback
826
+ slider.settings.onSlideAfter(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
827
+ };
828
+
829
+ /**
830
+ * Updates the auto controls state (either active, or combined switch)
831
+ *
832
+ * @param state (string) "start", "stop"
833
+ * - the new state of the auto show
834
+ */
835
+ var updateAutoControls = function(state){
836
+ // if autoControlsCombine is true, replace the current control with the new state
837
+ if(slider.settings.autoControlsCombine){
838
+ slider.controls.autoEl.html(slider.controls[state]);
839
+ // if autoControlsCombine is false, apply the "active" class to the appropriate control
840
+ }else{
841
+ slider.controls.autoEl.find('a').removeClass('active');
842
+ slider.controls.autoEl.find('a:not(.bx-' + state + ')').addClass('active');
843
+ }
844
+ };
845
+
846
+ /**
847
+ * Updates the direction controls (checks if either should be hidden)
848
+ */
849
+ var updateDirectionControls = function(){
850
+ if(getPagerQty() === 1){
851
+ slider.controls.prev.addClass('disabled');
852
+ slider.controls.next.addClass('disabled');
853
+ }else if(!slider.settings.infiniteLoop && slider.settings.hideControlOnEnd){
854
+ // if first slide
855
+ if(slider.active.index === 0){
856
+ slider.controls.prev.addClass('disabled');
857
+ slider.controls.next.removeClass('disabled');
858
+ // if last slide
859
+ }else if(slider.active.index === getPagerQty() - 1){
860
+ slider.controls.next.addClass('disabled');
861
+ slider.controls.prev.removeClass('disabled');
862
+ // if any slide in the middle
863
+ }else{
864
+ slider.controls.prev.removeClass('disabled');
865
+ slider.controls.next.removeClass('disabled');
866
+ }
867
+ }
868
+ };
869
+
870
+ /**
871
+ * Initializes the auto process
872
+ */
873
+ var initAuto = function(){
874
+ // if autoDelay was supplied, launch the auto show using a setTimeout() call
875
+ if(slider.settings.autoDelay > 0){
876
+ var timeout = setTimeout(el.startAuto, slider.settings.autoDelay);
877
+ // if autoDelay was not supplied, start the auto show normally
878
+ }else{
879
+ el.startAuto();
880
+ }
881
+ // if autoHover is requested
882
+ if(slider.settings.autoHover){
883
+ // on el hover
884
+ el.hover(function(){
885
+ // if the auto show is currently playing (has an active interval)
886
+ if(slider.interval){
887
+ // stop the auto show and pass true argument which will prevent control update
888
+ el.stopAuto(true);
889
+ // create a new autoPaused value which will be used by the relative "mouseout" event
890
+ slider.autoPaused = true;
891
+ }
892
+ }, function(){
893
+ // if the autoPaused value was created be the prior "mouseover" event
894
+ if(slider.autoPaused){
895
+ // start the auto show and pass true argument which will prevent control update
896
+ el.startAuto(true);
897
+ // reset the autoPaused value
898
+ slider.autoPaused = null;
899
+ }
900
+ });
901
+ }
902
+ };
903
+
904
+ /**
905
+ * Initializes the ticker process
906
+ */
907
+ var initTicker = function(){
908
+ var startPosition = 0;
909
+ // if autoDirection is "next", append a clone of the entire slider
910
+ if(slider.settings.autoDirection === 'next'){
911
+ el.append(slider.children.clone().addClass('bx-clone'));
912
+ // if autoDirection is "prev", prepend a clone of the entire slider, and set the left position
913
+ }else{
914
+ el.prepend(slider.children.clone().addClass('bx-clone'));
915
+ var position = slider.children.first().position();
916
+ startPosition = slider.settings.mode === 'horizontal' ? -position.left : -position.top;
917
+ }
918
+ setPositionProperty(startPosition, 'reset', 0);
919
+ // do not allow controls in ticker mode
920
+ slider.settings.pager = false;
921
+ slider.settings.controls = false;
922
+ slider.settings.autoControls = false;
923
+ // if autoHover is requested
924
+ if(slider.settings.tickerHover && !slider.usingCSS){
925
+ // on el hover
926
+ slider.viewport.hover(function(){
927
+ el.stop();
928
+ }, function(){
929
+ // calculate the total width of children (used to calculate the speed ratio)
930
+ var totalDimens = 0;
931
+ slider.children.each(function(index){
932
+ totalDimens += slider.settings.mode === 'horizontal' ? $(this).outerWidth(true) : $(this).outerHeight(true);
933
+ });
934
+ // calculate the speed ratio (used to determine the new speed to finish the paused animation)
935
+ var ratio = slider.settings.speed / totalDimens;
936
+ // determine which property to use
937
+ var property = slider.settings.mode === 'horizontal' ? 'left' : 'top';
938
+ // calculate the new speed
939
+ var newSpeed = ratio * (totalDimens - (Math.abs(parseInt(el.css(property)))));
940
+ tickerLoop(newSpeed);
941
+ });
942
+ }
943
+ // start the ticker loop
944
+ tickerLoop();
945
+ };
946
+
947
+ /**
948
+ * Runs a continuous loop, news ticker-style
949
+ */
950
+ var tickerLoop = function(resumeSpeed){
951
+ speed = resumeSpeed ? resumeSpeed : slider.settings.speed;
952
+ var position = {left: 0, top: 0};
953
+ var reset = {left: 0, top: 0};
954
+ // if "next" animate left position to last child, then reset left to 0
955
+ if(slider.settings.autoDirection === 'next'){
956
+ position = el.find('.bx-clone').first().position();
957
+ // if "prev" animate left position to 0, then reset left to first non-clone child
958
+ }else{
959
+ reset = slider.children.first().position();
960
+ }
961
+ var animateProperty = slider.settings.mode === 'horizontal' ? -position.left : -position.top;
962
+ var resetValue = slider.settings.mode === 'horizontal' ? -reset.left : -reset.top;
963
+ var params = {resetValue: resetValue};
964
+ setPositionProperty(animateProperty, 'ticker', speed, params);
965
+ };
966
+
967
+ /**
968
+ * Initializes touch events
969
+ */
970
+ var initTouch = function(){
971
+ // initialize object to contain all touch values
972
+ slider.touch = {
973
+ start: {x: 0, y: 0},
974
+ end: {x: 0, y: 0}
975
+ };
976
+ slider.viewport.bind('touchstart', onTouchStart);
977
+ };
978
+
979
+ /**
980
+ * Event handler for "touchstart"
981
+ *
982
+ * @param e (event)
983
+ * - DOM event object
984
+ */
985
+ var onTouchStart = function(e){
986
+ if(slider.working){
987
+ e.preventDefault();
988
+ }else{
989
+ // record the original position when touch starts
990
+ slider.touch.originalPos = el.position();
991
+ var orig = e.originalEvent;
992
+ // record the starting touch x, y coordinates
993
+ slider.touch.start.x = orig.changedTouches[0].pageX;
994
+ slider.touch.start.y = orig.changedTouches[0].pageY;
995
+ // bind a "touchmove" event to the viewport
996
+ slider.viewport.bind('touchmove', onTouchMove);
997
+ // bind a "touchend" event to the viewport
998
+ slider.viewport.bind('touchend', onTouchEnd);
999
+ }
1000
+ };
1001
+
1002
+ /**
1003
+ * Event handler for "touchmove"
1004
+ *
1005
+ * @param e (event)
1006
+ * - DOM event object
1007
+ */
1008
+ var onTouchMove = function(e){
1009
+ var orig = e.originalEvent;
1010
+ // if scrolling on y axis, do not prevent default
1011
+ var xMovement = Math.abs(orig.changedTouches[0].pageX - slider.touch.start.x);
1012
+ var yMovement = Math.abs(orig.changedTouches[0].pageY - slider.touch.start.y);
1013
+ // x axis swipe
1014
+ if((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX){
1015
+ e.preventDefault();
1016
+ // y axis swipe
1017
+ }else if((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY){
1018
+ e.preventDefault();
1019
+ }
1020
+ if(slider.settings.mode !== 'fade' && slider.settings.oneToOneTouch){
1021
+ var value = 0, change = 0;
1022
+ // if horizontal, drag along x axis
1023
+ if(slider.settings.mode === 'horizontal'){
1024
+ change = orig.changedTouches[0].pageX - slider.touch.start.x;
1025
+ value = slider.touch.originalPos.left + change;
1026
+ // if vertical, drag along y axis
1027
+ }else{
1028
+ change = orig.changedTouches[0].pageY - slider.touch.start.y;
1029
+ value = slider.touch.originalPos.top + change;
1030
+ }
1031
+ setPositionProperty(value, 'reset', 0);
1032
+ }
1033
+ };
1034
+
1035
+ /**
1036
+ * Event handler for "touchend"
1037
+ *
1038
+ * @param e (event)
1039
+ * - DOM event object
1040
+ */
1041
+ var onTouchEnd = function(e){
1042
+ slider.viewport.unbind('touchmove', onTouchMove);
1043
+ var orig = e.originalEvent;
1044
+ var value = 0;
1045
+ var distance = 0;
1046
+ // record end x, y positions
1047
+ slider.touch.end.x = orig.changedTouches[0].pageX;
1048
+ slider.touch.end.y = orig.changedTouches[0].pageY;
1049
+ // if fade mode, check if absolute x distance clears the threshold
1050
+ if(slider.settings.mode === 'fade'){
1051
+ distance = Math.abs(slider.touch.start.x - slider.touch.end.x);
1052
+ if(distance >= slider.settings.swipeThreshold){
1053
+ if(slider.touch.start.x > slider.touch.end.x){
1054
+ el.goToNextSlide();
1055
+ } else {
1056
+ el.goToPrevSlide();
1057
+ }
1058
+ el.stopAuto();
1059
+ }
1060
+ // not fade mode
1061
+ }else{
1062
+ // calculate distance and el's animate property
1063
+ if(slider.settings.mode === 'horizontal'){
1064
+ distance = slider.touch.end.x - slider.touch.start.x;
1065
+ value = slider.touch.originalPos.left;
1066
+ }else{
1067
+ distance = slider.touch.end.y - slider.touch.start.y;
1068
+ value = slider.touch.originalPos.top;
1069
+ }
1070
+ // if not infinite loop and first / last slide, do not attempt a slide transition
1071
+ if(!slider.settings.infiniteLoop && ((slider.active.index === 0 && distance > 0) || (slider.active.last && distance < 0))){
1072
+ setPositionProperty(value, 'reset', 200);
1073
+ }else{
1074
+ // check if distance clears threshold
1075
+ if(Math.abs(distance) >= slider.settings.swipeThreshold){
1076
+ if(distance < 0){
1077
+ el.goToNextSlide();
1078
+ } else {
1079
+ el.goToPrevSlide();
1080
+ }
1081
+ el.stopAuto();
1082
+ }else{
1083
+ // el.animate(property, 200);
1084
+ setPositionProperty(value, 'reset', 200);
1085
+ }
1086
+ }
1087
+ }
1088
+ slider.viewport.unbind('touchend', onTouchEnd);
1089
+ };
1090
+
1091
+ /**
1092
+ * Window resize event callback
1093
+ */
1094
+ var resizeWindow = function(e){
1095
+ // don't do anything if slider isn't initialized.
1096
+ if(!slider.initialized){ return; }
1097
+ // get the new window dimens (again, thank you IE)
1098
+ var windowWidthNew = $(window).width();
1099
+ var windowHeightNew = $(window).height();
1100
+ // make sure that it is a true window resize
1101
+ // *we must check this because our dinosaur friend IE fires a window resize event when certain DOM elements
1102
+ // are resized. Can you just die already?*
1103
+ if(windowWidth !== windowWidthNew || windowHeight !== windowHeightNew){
1104
+ // set the new window dimens
1105
+ windowWidth = windowWidthNew;
1106
+ windowHeight = windowHeightNew;
1107
+ // update all dynamic elements
1108
+ el.redrawSlider();
1109
+ // Call user resize handler
1110
+ slider.settings.onSliderResize.call(el, slider.active.index);
1111
+ }
1112
+ };
1113
+
1114
+ /**
1115
+ * ===================================================================================
1116
+ * = PUBLIC FUNCTIONS
1117
+ * ===================================================================================
1118
+ */
1119
+
1120
+ /**
1121
+ * Performs slide transition to the specified slide
1122
+ *
1123
+ * @param slideIndex (int)
1124
+ * - the destination slide's index (zero-based)
1125
+ *
1126
+ * @param direction (string)
1127
+ * - INTERNAL USE ONLY - the direction of travel ("prev" / "next")
1128
+ */
1129
+ el.goToSlide = function(slideIndex, direction){
1130
+ // if plugin is currently in motion, ignore request
1131
+ if(slider.working || slider.active.index === slideIndex){ return; }
1132
+ // declare that plugin is in motion
1133
+ slider.working = true;
1134
+ // store the old index
1135
+ slider.oldIndex = slider.active.index;
1136
+ // if slideIndex is less than zero, set active index to last child (this happens during infinite loop)
1137
+ if(slideIndex < 0){
1138
+ slider.active.index = getPagerQty() - 1;
1139
+ // if slideIndex is greater than children length, set active index to 0 (this happens during infinite loop)
1140
+ }else if(slideIndex >= getPagerQty()){
1141
+ slider.active.index = 0;
1142
+ // set active index to requested slide
1143
+ }else{
1144
+ slider.active.index = slideIndex;
1145
+ }
1146
+ // onSlideBefore, onSlideNext, onSlidePrev callbacks
1147
+ slider.settings.onSlideBefore(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
1148
+ if(direction === 'next'){
1149
+ slider.settings.onSlideNext(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
1150
+ }else if(direction === 'prev'){
1151
+ slider.settings.onSlidePrev(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
1152
+ }
1153
+ // check if last slide
1154
+ slider.active.last = slider.active.index >= getPagerQty() - 1;
1155
+ // update the pager with active class
1156
+ if(slider.settings.pager || slider.settings.pagerCustom){ updatePagerActive(slider.active.index); }
1157
+ // // check for direction control update
1158
+ if(slider.settings.controls){ updateDirectionControls(); }
1159
+ // if slider is set to mode: "fade"
1160
+ if(slider.settings.mode === 'fade'){
1161
+ // if adaptiveHeight is true and next height is different from current height, animate to the new height
1162
+ if(slider.settings.adaptiveHeight && slider.viewport.height() !== getViewportHeight()){
1163
+ slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
1164
+ }
1165
+ // fade out the visible child and reset its z-index value
1166
+ slider.children.filter(':visible').fadeOut(slider.settings.speed).css({zIndex: 0});
1167
+ // fade in the newly requested slide
1168
+ slider.children.eq(slider.active.index).css('zIndex', slider.settings.slideZIndex+1).fadeIn(slider.settings.speed, function(){
1169
+ $(this).css('zIndex', slider.settings.slideZIndex);
1170
+ updateAfterSlideTransition();
1171
+ });
1172
+ // slider mode is not "fade"
1173
+ }else{
1174
+ // if adaptiveHeight is true and next height is different from current height, animate to the new height
1175
+ if(slider.settings.adaptiveHeight && slider.viewport.height() !== getViewportHeight()){
1176
+ slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
1177
+ }
1178
+ var moveBy = 0;
1179
+ var position = {left: 0, top: 0};
1180
+ var lastChild = null;
1181
+ // if carousel and not infinite loop
1182
+ if(!slider.settings.infiniteLoop && slider.carousel && slider.active.last){
1183
+ if(slider.settings.mode === 'horizontal'){
1184
+ // get the last child position
1185
+ lastChild = slider.children.eq(slider.children.length - 1);
1186
+ position = lastChild.position();
1187
+ // calculate the position of the last slide
1188
+ moveBy = slider.viewport.width() - lastChild.outerWidth();
1189
+ }else{
1190
+ // get last showing index position
1191
+ var lastShowingIndex = slider.children.length - slider.settings.minSlides;
1192
+ position = slider.children.eq(lastShowingIndex).position();
1193
+ }
1194
+ // horizontal carousel, going previous while on first slide (infiniteLoop mode)
1195
+ }else if(slider.carousel && slider.active.last && direction === 'prev'){
1196
+ // get the last child position
1197
+ var eq = slider.settings.moveSlides === 1 ? slider.settings.maxSlides - getMoveBy() : ((getPagerQty() - 1) * getMoveBy()) - (slider.children.length - slider.settings.maxSlides);
1198
+ lastChild = el.children('.bx-clone').eq(eq);
1199
+ position = lastChild.position();
1200
+ // if infinite loop and "Next" is clicked on the last slide
1201
+ }else if(direction === 'next' && slider.active.index === 0){
1202
+ // get the last clone position
1203
+ position = el.find('> .bx-clone').eq(slider.settings.maxSlides).position();
1204
+ slider.active.last = false;
1205
+ // normal non-zero requests
1206
+ }else if(slideIndex >= 0){
1207
+ var requestEl = slideIndex * getMoveBy();
1208
+ position = slider.children.eq(requestEl).position();
1209
+ }
1210
+
1211
+ /* If the position doesn't exist
1212
+ * (e.g. if you destroy the slider on a next click),
1213
+ * it doesn't throw an error.
1214
+ */
1215
+ if("undefined" !== typeof(position)){
1216
+ var value = slider.settings.mode === 'horizontal' ? -(position.left - moveBy) : -position.top;
1217
+ // plugin values to be animated
1218
+ setPositionProperty(value, 'slide', slider.settings.speed);
1219
+ }
1220
+ }
1221
+ };
1222
+
1223
+ /**
1224
+ * Transitions to the next slide in the show
1225
+ */
1226
+ el.goToNextSlide = function(){
1227
+ // if infiniteLoop is false and last page is showing, disregard call
1228
+ if(!slider.settings.infiniteLoop && slider.active.last){ return; }
1229
+ var pagerIndex = parseInt(slider.active.index) + 1;
1230
+ el.goToSlide(pagerIndex, 'next');
1231
+ };
1232
+
1233
+ /**
1234
+ * Transitions to the prev slide in the show
1235
+ */
1236
+ el.goToPrevSlide = function(){
1237
+ // if infiniteLoop is false and last page is showing, disregard call
1238
+ if(!slider.settings.infiniteLoop && slider.active.index === 0){ return; }
1239
+ var pagerIndex = parseInt(slider.active.index) - 1;
1240
+ el.goToSlide(pagerIndex, 'prev');
1241
+ };
1242
+
1243
+ /**
1244
+ * Starts the auto show
1245
+ *
1246
+ * @param preventControlUpdate (boolean)
1247
+ * - if true, auto controls state will not be updated
1248
+ */
1249
+ el.startAuto = function(preventControlUpdate){
1250
+ // if an interval already exists, disregard call
1251
+ if(slider.interval){ return; }
1252
+ // create an interval
1253
+ slider.interval = setInterval(function(){
1254
+ if(slider.settings.autoDirection === 'next'){
1255
+ el.goToNextSlide();
1256
+ }else{
1257
+ el.goToPrevSlide();
1258
+ }
1259
+ }, slider.settings.pause);
1260
+ // if auto controls are displayed and preventControlUpdate is not true
1261
+ if(slider.settings.autoControls && preventControlUpdate !== true){ updateAutoControls('stop'); }
1262
+ };
1263
+
1264
+ /**
1265
+ * Stops the auto show
1266
+ *
1267
+ * @param preventControlUpdate (boolean)
1268
+ * - if true, auto controls state will not be updated
1269
+ */
1270
+ el.stopAuto = function(preventControlUpdate){
1271
+ // if no interval exists, disregard call
1272
+ if(!slider.interval){ return; }
1273
+ // clear the interval
1274
+ clearInterval(slider.interval);
1275
+ slider.interval = null;
1276
+ // if auto controls are displayed and preventControlUpdate is not true
1277
+ if(slider.settings.autoControls && preventControlUpdate !== true){ updateAutoControls('start'); }
1278
+ };
1279
+
1280
+ /**
1281
+ * Returns current slide index (zero-based)
1282
+ */
1283
+ el.getCurrentSlide = function(){
1284
+ return slider.active.index;
1285
+ };
1286
+
1287
+ /**
1288
+ * Returns current slide element
1289
+ */
1290
+ el.getCurrentSlideElement = function(){
1291
+ return slider.children.eq(slider.active.index);
1292
+ };
1293
+
1294
+ /**
1295
+ * Returns number of slides in show
1296
+ */
1297
+ el.getSlideCount = function(){
1298
+ return slider.children.length;
1299
+ };
1300
+
1301
+ /**
1302
+ * Update all dynamic slider elements
1303
+ */
1304
+ el.redrawSlider = function(){
1305
+ // resize all children in ratio to new screen size
1306
+ slider.children.add(el.find('.bx-clone')).outerWidth(getSlideWidth());
1307
+ // adjust the height
1308
+ slider.viewport.css('height', getViewportHeight());
1309
+ // update the slide position
1310
+ if(!slider.settings.ticker) { setSlidePosition(); }
1311
+ // if active.last was true before the screen resize, we want
1312
+ // to keep it last no matter what screen size we end on
1313
+ if (slider.active.last) { slider.active.index = getPagerQty() - 1; }
1314
+ // if the active index (page) no longer exists due to the resize, simply set the index as last
1315
+ if (slider.active.index >= getPagerQty()) { slider.active.last = true; }
1316
+ // if a pager is being displayed and a custom pager is not being used, update it
1317
+ if(slider.settings.pager && !slider.settings.pagerCustom){
1318
+ populatePager();
1319
+ updatePagerActive(slider.active.index);
1320
+ }
1321
+ };
1322
+
1328
1323
  /**
1329
- * Reload the slider (revert all DOM changes, and re-initialize)
1330
- */
1331
- el.reloadSlider = function(settings){
1332
- if (settings != undefined) options = settings;
1333
- el.destroySlider();
1334
- init();
1335
- }
1336
-
1337
- init();
1338
-
1339
- // returns the current jQuery object
1340
- return this;
1341
- }
1324
+ * Destroy the current instance of the slider (revert everything back to original state)
1325
+ */
1326
+ el.destroySlider = function(){
1327
+ // don't do anything if slider has already been destroyed
1328
+ if(!slider.initialized){ return; }
1329
+ slider.initialized = false;
1330
+ $('.bx-clone', this).remove();
1331
+ slider.children.each(function(){
1332
+ if($(this).data("origStyle") !== undefined){
1333
+ $(this).attr("style", $(this).data("origStyle"));
1334
+ } else {
1335
+ $(this).removeAttr('style');
1336
+ }
1337
+ });
1338
+ if($(this).data("origStyle") !== undefined){
1339
+ this.attr("style", $(this).data("origStyle"));
1340
+ } else {
1341
+ $(this).removeAttr('style');
1342
+ }
1343
+ $(this).unwrap().unwrap();
1344
+ if(slider.controls.el){ slider.controls.el.remove(); }
1345
+ if(slider.controls.next){ slider.controls.next.remove(); }
1346
+ if(slider.controls.prev){ slider.controls.prev.remove(); }
1347
+ if(slider.pagerEl && slider.settings.controls && !slider.settings.pagerCustom){ slider.pagerEl.remove(); }
1348
+ $('.bx-caption', this).remove();
1349
+ if(slider.controls.autoEl){ slider.controls.autoEl.remove(); }
1350
+ clearInterval(slider.interval);
1351
+ if(slider.settings.responsive){ $(window).unbind('resize', resizeWindow); }
1352
+ };
1353
+
1354
+ /**
1355
+ * Reload the slider (revert all DOM changes, and re-initialize)
1356
+ */
1357
+ el.reloadSlider = function(settings){
1358
+ if(settings !== undefined){ options = settings; }
1359
+ el.destroySlider();
1360
+ init();
1361
+ };
1362
+
1363
+ init();
1364
+
1365
+ // returns the current jQuery object
1366
+ return this;
1367
+ };
1342
1368
 
1343
1369
  })(jQuery);