| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628 |
- /**
- * bxSlider v4.2.5
- * Copyright 2013-2015 Steven Wanderski
- * Written while drinking Belgian ales and listening to jazz
- * Licensed under MIT (http://opensource.org/licenses/MIT)
- */
- /*
- Patched to fix issue #960
- See: https://github.com/stevenwanderski/bxslider-4/pull/1133/commits/c32dd309ef6801fd294c631a2ecb889084e713d5
- Patched to fix https://bitbucket.org/fastlinemedia/beaver-builder-plugin/issues/1292/bx-slider-bug-with-links-in-firefox-59
- Ref: https://github.com/stevenwanderski/bxslider-4/issues/1188
- */
- ;(function($) {
- var defaults = {
- // GENERAL
- mode: 'horizontal',
- slideSelector: '',
- infiniteLoop: true,
- hideControlOnEnd: false,
- speed: 500,
- easing: null,
- slideMargin: 0,
- startSlide: 0,
- randomStart: false,
- captions: false,
- ticker: false,
- tickerHover: false,
- adaptiveHeight: false,
- adaptiveHeightSpeed: 500,
- video: false,
- useCSS: true,
- preloadImages: 'visible',
- responsive: true,
- slideZIndex: 50,
- wrapperClass: 'bx-wrapper',
- // TOUCH
- touchEnabled: true,
- swipeThreshold: 50,
- oneToOneTouch: true,
- preventDefaultSwipeX: true,
- preventDefaultSwipeY: false,
- // ACCESSIBILITY
- ariaLive: true,
- ariaHidden: true,
- // KEYBOARD
- keyboardEnabled: false,
- // PAGER
- pager: true,
- pagerType: 'full',
- pagerShortSeparator: ' / ',
- pagerSelector: null,
- buildPager: null,
- pagerCustom: null,
- // CONTROLS
- controls: true,
- nextText: 'Next',
- prevText: 'Prev',
- nextSelector: null,
- prevSelector: null,
- autoControls: false,
- startText: 'Start',
- stopText: 'Stop',
- autoControlsCombine: false,
- autoControlsSelector: null,
- // AUTO
- auto: false,
- pause: 4000,
- autoStart: true,
- autoDirection: 'next',
- stopAutoOnClick: false,
- autoHover: false,
- autoDelay: 0,
- autoSlideForOnePage: false,
- // CAROUSEL
- minSlides: 1,
- maxSlides: 1,
- moveSlides: 0,
- slideWidth: 0,
- shrinkItems: false,
- // CALLBACKS
- onSliderLoad: function() { return true; },
- onSlideBefore: function() { return true; },
- onSlideAfter: function() { return true; },
- onSlideNext: function() { return true; },
- onSlidePrev: function() { return true; },
- onSliderResize: function() { return true; }
- };
- $.fn.bxSlider = function(options) {
- if (this.length === 0) {
- return this;
- }
- // support multiple elements
- if (this.length > 1) {
- this.each(function() {
- $(this).bxSlider(options);
- });
- return this;
- }
- // create a namespace to be used throughout the plugin
- var slider = {},
- // set a reference to our slider element
- el = this,
- // get the original window dimens (thanks a lot IE)
- windowWidth = $(window).width(),
- windowHeight = $(window).height();
- // Return if slider is already initialized
- if ($(el).data('bxSlider')) { return; }
- /**
- * ===================================================================================
- * = PRIVATE FUNCTIONS
- * ===================================================================================
- */
- /**
- * Initializes namespace settings to be used throughout plugin
- */
- var init = function() {
- // Return if slider is already initialized
- if ($(el).data('bxSlider')) { return; }
- // merge user-supplied options with the defaults
- slider.settings = $.extend({}, defaults, options);
- // parse slideWidth setting
- slider.settings.slideWidth = parseInt(slider.settings.slideWidth);
- // store the original children
- slider.children = el.children(slider.settings.slideSelector);
- // check if actual number of slides is less than minSlides / maxSlides
- if (slider.children.length < slider.settings.minSlides) { slider.settings.minSlides = slider.children.length; }
- if (slider.children.length < slider.settings.maxSlides) { slider.settings.maxSlides = slider.children.length; }
- // if random start, set the startSlide setting to random number
- if (slider.settings.randomStart) { slider.settings.startSlide = Math.floor(Math.random() * slider.children.length); }
- // store active slide information
- slider.active = { index: slider.settings.startSlide };
- // store if the slider is in carousel mode (displaying / moving multiple slides)
- slider.carousel = slider.settings.minSlides > 1 || slider.settings.maxSlides > 1 ? true : false;
- // if carousel, force preloadImages = 'all'
- if (slider.carousel) { slider.settings.preloadImages = 'all'; }
- // calculate the min / max width thresholds based on min / max number of slides
- // used to setup and update carousel slides dimensions
- slider.minThreshold = (slider.settings.minSlides * slider.settings.slideWidth) + ((slider.settings.minSlides - 1) * slider.settings.slideMargin);
- slider.maxThreshold = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
- // store the current state of the slider (if currently animating, working is true)
- slider.working = false;
- // initialize the controls object
- slider.controls = {};
- // initialize an auto interval
- slider.interval = null;
- // determine which property to use for transitions
- slider.animProp = slider.settings.mode === 'vertical' ? 'top' : 'left';
- // determine if hardware acceleration can be used
- slider.usingCSS = slider.settings.useCSS && slider.settings.mode !== 'fade' && (function() {
- // create our test div element
- var div = document.createElement('div'),
- // css transition properties
- props = ['WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'];
- // test for each property
- for (var i = 0; i < props.length; i++) {
- if (div.style[props[i]] !== undefined) {
- slider.cssPrefix = props[i].replace('Perspective', '').toLowerCase();
- slider.animProp = '-' + slider.cssPrefix + '-transform';
- return true;
- }
- }
- return false;
- }());
- // if vertical mode always make maxSlides and minSlides equal
- if (slider.settings.mode === 'vertical') { slider.settings.maxSlides = slider.settings.minSlides; }
- // save original style data
- el.data('origStyle', el.attr('style'));
- el.children(slider.settings.slideSelector).each(function() {
- $(this).data('origStyle', $(this).attr('style'));
- });
- // perform all DOM / CSS modifications
- setup();
- };
- /**
- * Performs all DOM and CSS modifications
- */
- var setup = function() {
- var preloadSelector = slider.children.eq(slider.settings.startSlide); // set the default preload selector (visible)
- // wrap el in a wrapper
- el.wrap('<div class="' + slider.settings.wrapperClass + '"><div class="bx-viewport"></div></div>');
- // store a namespace reference to .bx-viewport
- slider.viewport = el.parent();
- // add aria-live if the setting is enabled and ticker mode is disabled
- if (slider.settings.ariaLive && !slider.settings.ticker) {
- slider.viewport.attr('aria-live', 'polite');
- }
- // add a loading div to display while images are loading
- slider.loader = $('<div class="bx-loading" />');
- slider.viewport.prepend(slider.loader);
- // set el to a massive width, to hold any needed slides
- // also strip any margin and padding from el
- el.css({
- width: slider.settings.mode === 'horizontal' ? (slider.children.length * 1000 + 215) + '%' : 'auto',
- position: 'relative'
- });
- // if using CSS, add the easing property
- if (slider.usingCSS && slider.settings.easing) {
- el.css('-' + slider.cssPrefix + '-transition-timing-function', slider.settings.easing);
- // if not using CSS and no easing value was supplied, use the default JS animation easing (swing)
- } else if (!slider.settings.easing) {
- slider.settings.easing = 'swing';
- }
- // make modifications to the viewport (.bx-viewport)
- slider.viewport.css({
- width: '100%',
- overflow: 'hidden',
- position: 'relative'
- });
- slider.viewport.parent().css({
- maxWidth: getViewportMaxWidth()
- });
- // make modification to the wrapper (.bx-wrapper)
- if (!slider.settings.pager && !slider.settings.controls) {
- slider.viewport.parent().css({
- margin: '0 auto 0px'
- });
- }
- // apply css to all slider children
- slider.children.css({
- float: slider.settings.mode === 'horizontal' ? 'left' : 'none',
- listStyle: 'none',
- position: 'relative'
- });
- // apply the calculated width after the float is applied to prevent scrollbar interference
- slider.children.css('width', getSlideWidth());
- // if slideMargin is supplied, add the css
- if (slider.settings.mode === 'horizontal' && slider.settings.slideMargin > 0) { slider.children.css('marginRight', slider.settings.slideMargin); }
- if (slider.settings.mode === 'vertical' && slider.settings.slideMargin > 0) { slider.children.css('marginBottom', slider.settings.slideMargin); }
- // if "fade" mode, add positioning and z-index CSS
- if (slider.settings.mode === 'fade') {
- slider.children.css({
- position: 'absolute',
- zIndex: 0,
- display: 'none'
- });
- // prepare the z-index on the showing element
- slider.children.eq(slider.settings.startSlide).css({zIndex: slider.settings.slideZIndex, display: 'block'});
- }
- // create an element to contain all slider controls (pager, start / stop, etc)
- slider.controls.el = $('<div class="bx-controls" />');
- // if captions are requested, add them
- if (slider.settings.captions) { appendCaptions(); }
- // check if startSlide is last slide
- slider.active.last = slider.settings.startSlide === getPagerQty() - 1;
- // if video is true, set up the fitVids plugin
- if (slider.settings.video) { el.fitVids(); }
- if (slider.settings.preloadImages === 'all' || slider.settings.ticker) { preloadSelector = slider.children; }
- // only check for control addition if not in "ticker" mode
- if (!slider.settings.ticker) {
- // if controls are requested, add them
- if (slider.settings.controls) { appendControls(); }
- // if auto is true, and auto controls are requested, add them
- if (slider.settings.auto && slider.settings.autoControls) { appendControlsAuto(); }
- // if pager is requested, add it
- if (slider.settings.pager) { appendPager(); }
- // if any control option is requested, add the controls wrapper
- if (slider.settings.controls || slider.settings.autoControls || slider.settings.pager) { slider.viewport.after(slider.controls.el); }
- // if ticker mode, do not allow a pager
- } else {
- slider.settings.pager = false;
- }
- loadElements(preloadSelector, start);
- };
- var loadElements = function(selector, callback) {
- var total = selector.find('img:not([src=""]), iframe').length,
- count = 0;
- if (total === 0) {
- callback();
- return;
- }
- selector.find('img:not([src=""]), iframe').each(function() {
- $(this).one('load error', function() {
- if (++count === total) { callback(); }
- }).each(function() {
- if (this.complete) { $(this).load(); }
- });
- });
- };
- /**
- * Start the slider
- */
- var start = function() {
- // if infinite loop, prepare additional slides
- if (slider.settings.infiniteLoop && slider.settings.mode !== 'fade' && !slider.settings.ticker) {
- var slice = slider.settings.mode === 'vertical' ? slider.settings.minSlides : slider.settings.maxSlides,
- sliceAppend = slider.children.slice(0, slice).clone(true).addClass('bx-clone'),
- slicePrepend = slider.children.slice(-slice).clone(true).addClass('bx-clone');
- if (slider.settings.ariaHidden) {
- sliceAppend.attr('aria-hidden', true);
- slicePrepend.attr('aria-hidden', true);
- }
- el.append(sliceAppend).prepend(slicePrepend);
- }
- // remove the loading DOM element
- slider.loader.remove();
- // set the left / top position of "el"
- setSlidePosition();
- // if "vertical" mode, always use adaptiveHeight to prevent odd behavior
- if (slider.settings.mode === 'vertical') { slider.settings.adaptiveHeight = true; }
- // set the viewport height
- slider.viewport.height(getViewportHeight());
- // make sure everything is positioned just right (same as a window resize)
- el.redrawSlider();
- // onSliderLoad callback
- slider.settings.onSliderLoad.call(el, slider.active.index);
- // slider has been fully initialized
- slider.initialized = true;
- // bind the resize call to the window
- if (slider.settings.responsive) { $(window).bind('resize', resizeWindow); }
- // if auto is true and has more than 1 page, start the show
- if (slider.settings.auto && slider.settings.autoStart && (getPagerQty() > 1 || slider.settings.autoSlideForOnePage)) { initAuto(); }
- // if ticker is true, start the ticker
- if (slider.settings.ticker) { initTicker(); }
- // if pager is requested, make the appropriate pager link active
- if (slider.settings.pager) { updatePagerActive(slider.settings.startSlide); }
- // check for any updates to the controls (like hideControlOnEnd updates)
- if (slider.settings.controls) { updateDirectionControls(); }
- // if touchEnabled is true, setup the touch events
- if (slider.settings.touchEnabled && !slider.settings.ticker) { initTouch(); }
- // if keyboardEnabled is true, setup the keyboard events
- if (slider.settings.keyboardEnabled && !slider.settings.ticker) {
- $(document).keydown(keyPress);
- }
- };
- /**
- * Returns the calculated height of the viewport, used to determine either adaptiveHeight or the maxHeight value
- */
- var getViewportHeight = function() {
- var height = 0;
- // first determine which children (slides) should be used in our height calculation
- var children = $();
- // if mode is not "vertical" and adaptiveHeight is false, include all children
- if (slider.settings.mode !== 'vertical' && !slider.settings.adaptiveHeight) {
- children = slider.children;
- } else {
- // if not carousel, return the single active child
- if (!slider.carousel) {
- children = slider.children.eq(slider.active.index);
- // if carousel, return a slice of children
- } else {
- // get the individual slide index
- var currentIndex = slider.settings.moveSlides === 1 ? slider.active.index : slider.active.index * getMoveBy();
- // add the current slide to the children
- children = slider.children.eq(currentIndex);
- // cycle through the remaining "showing" slides
- for (i = 1; i <= slider.settings.maxSlides - 1; i++) {
- // if looped back to the start
- if (currentIndex + i >= slider.children.length) {
- children = children.add(slider.children.eq(i - 1));
- } else {
- children = children.add(slider.children.eq(currentIndex + i));
- }
- }
- }
- }
- // if "vertical" mode, calculate the sum of the heights of the children
- if (slider.settings.mode === 'vertical') {
- children.each(function(index) {
- height += $(this).outerHeight();
- });
- // add user-supplied margins
- if (slider.settings.slideMargin > 0) {
- height += slider.settings.slideMargin * (slider.settings.minSlides - 1);
- }
- // if not "vertical" mode, calculate the max height of the children
- } else {
- height = Math.max.apply(Math, children.map(function() {
- return $(this).outerHeight(false);
- }).get());
- }
- if (slider.viewport.css('box-sizing') === 'border-box') {
- height += parseFloat(slider.viewport.css('padding-top')) + parseFloat(slider.viewport.css('padding-bottom')) +
- parseFloat(slider.viewport.css('border-top-width')) + parseFloat(slider.viewport.css('border-bottom-width'));
- } else if (slider.viewport.css('box-sizing') === 'padding-box') {
- height += parseFloat(slider.viewport.css('padding-top')) + parseFloat(slider.viewport.css('padding-bottom'));
- }
- return height;
- };
- /**
- * Returns the calculated width to be used for the outer wrapper / viewport
- */
- var getViewportMaxWidth = function() {
- var width = '100%';
- if (slider.settings.slideWidth > 0) {
- if (slider.settings.mode === 'horizontal') {
- width = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
- } else {
- width = slider.settings.slideWidth;
- }
- }
- return width;
- };
- /**
- * Returns the calculated width to be applied to each slide
- */
- var getSlideWidth = function() {
- var newElWidth = slider.settings.slideWidth, // start with any user-supplied slide width
- wrapWidth = slider.viewport.width(); // get the current viewport width
- // if slide width was not supplied, or is larger than the viewport use the viewport width
- if (slider.settings.slideWidth === 0 ||
- (slider.settings.slideWidth > wrapWidth && !slider.carousel) ||
- slider.settings.mode === 'vertical') {
- newElWidth = wrapWidth;
- // if carousel, use the thresholds to determine the width
- } else if (slider.settings.maxSlides > 1 && slider.settings.mode === 'horizontal') {
- if (wrapWidth > slider.maxThreshold) {
- return newElWidth;
- } else if (wrapWidth < slider.minThreshold) {
- newElWidth = (wrapWidth - (slider.settings.slideMargin * (slider.settings.minSlides - 1))) / slider.settings.minSlides;
- } else if (slider.settings.shrinkItems) {
- newElWidth = Math.floor((wrapWidth + slider.settings.slideMargin) / (Math.ceil((wrapWidth + slider.settings.slideMargin) / (newElWidth + slider.settings.slideMargin))) - slider.settings.slideMargin);
- }
- }
- return newElWidth;
- };
- /**
- * Returns the number of slides currently visible in the viewport (includes partially visible slides)
- */
- var getNumberSlidesShowing = function() {
- var slidesShowing = 1,
- childWidth = null;
- if (slider.settings.mode === 'horizontal' && slider.settings.slideWidth > 0) {
- // if viewport is smaller than minThreshold, return minSlides
- if (slider.viewport.width() < slider.minThreshold) {
- slidesShowing = slider.settings.minSlides;
- // if viewport is larger than maxThreshold, return maxSlides
- } else if (slider.viewport.width() > slider.maxThreshold) {
- slidesShowing = slider.settings.maxSlides;
- // if viewport is between min / max thresholds, divide viewport width by first child width
- } else {
- childWidth = slider.children.first().width() + slider.settings.slideMargin;
- slidesShowing = Math.floor((slider.viewport.width() +
- slider.settings.slideMargin) / childWidth);
- }
- // if "vertical" mode, slides showing will always be minSlides
- } else if (slider.settings.mode === 'vertical') {
- slidesShowing = slider.settings.minSlides;
- }
- return slidesShowing;
- };
- /**
- * Returns the number of pages (one full viewport of slides is one "page")
- */
- var getPagerQty = function() {
- var pagerQty = 0,
- breakPoint = 0,
- counter = 0;
- // if moveSlides is specified by the user
- if (slider.settings.moveSlides > 0) {
- if (slider.settings.infiniteLoop) {
- pagerQty = Math.ceil(slider.children.length / getMoveBy());
- } else {
- // when breakpoint goes above children length, counter is the number of pages
- while (breakPoint < slider.children.length) {
- ++pagerQty;
- breakPoint = counter + getNumberSlidesShowing();
- counter += slider.settings.moveSlides <= getNumberSlidesShowing() ? slider.settings.moveSlides : getNumberSlidesShowing();
- }
- }
- // if moveSlides is 0 (auto) divide children length by sides showing, then round up
- } else {
- pagerQty = Math.ceil(slider.children.length / getNumberSlidesShowing());
- }
- return pagerQty;
- };
- /**
- * Returns the number of individual slides by which to shift the slider
- */
- var getMoveBy = function() {
- // if moveSlides was set by the user and moveSlides is less than number of slides showing
- if (slider.settings.moveSlides > 0 && slider.settings.moveSlides <= getNumberSlidesShowing()) {
- return slider.settings.moveSlides;
- }
- // if moveSlides is 0 (auto)
- return getNumberSlidesShowing();
- };
- /**
- * Sets the slider's (el) left or top position
- */
- var setSlidePosition = function() {
- var position, lastChild, lastShowingIndex;
- // if last slide, not infinite loop, and number of children is larger than specified maxSlides
- if (slider.children.length > slider.settings.maxSlides && slider.active.last && !slider.settings.infiniteLoop) {
- if (slider.settings.mode === 'horizontal') {
- // get the last child's position
- lastChild = slider.children.last();
- position = lastChild.position();
- // set the left position
- setPositionProperty(-(position.left - (slider.viewport.width() - lastChild.outerWidth())), 'reset', 0);
- } else if (slider.settings.mode === 'vertical') {
- // get the last showing index's position
- lastShowingIndex = slider.children.length - slider.settings.minSlides;
- position = slider.children.eq(lastShowingIndex).position();
- // set the top position
- setPositionProperty(-position.top, 'reset', 0);
- }
- // if not last slide
- } else {
- // get the position of the first showing slide
- position = slider.children.eq(slider.active.index * getMoveBy()).position();
- // check for last slide
- if (slider.active.index === getPagerQty() - 1) { slider.active.last = true; }
- // set the respective position
- if (position !== undefined) {
- if (slider.settings.mode === 'horizontal') { setPositionProperty(-position.left, 'reset', 0); }
- else if (slider.settings.mode === 'vertical') { setPositionProperty(-position.top, 'reset', 0); }
- }
- }
- };
- /**
- * Sets the el's animating property position (which in turn will sometimes animate el).
- * If using CSS, sets the transform property. If not using CSS, sets the top / left property.
- *
- * @param value (int)
- * - the animating property's value
- *
- * @param type (string) 'slide', 'reset', 'ticker'
- * - the type of instance for which the function is being
- *
- * @param duration (int)
- * - the amount of time (in ms) the transition should occupy
- *
- * @param params (array) optional
- * - an optional parameter containing any variables that need to be passed in
- */
- var setPositionProperty = function(value, type, duration, params) {
- var animateObj, propValue;
- // use CSS transform
- if (slider.usingCSS) {
- // determine the translate3d value
- propValue = slider.settings.mode === 'vertical' ? 'translate3d(0, ' + value + 'px, 0)' : 'translate3d(' + value + 'px, 0, 0)';
- // add the CSS transition-duration
- el.css('-' + slider.cssPrefix + '-transition-duration', duration / 1000 + 's');
- if (type === 'slide') {
- // set the property value
- el.css(slider.animProp, propValue);
- if (duration !== 0) {
- // bind a callback method - executes when CSS transition completes
- el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
- //make sure it's the correct one
- if (!$(e.target).is(el)) { return; }
- // unbind the callback
- el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
- updateAfterSlideTransition();
- });
- } else { //duration = 0
- updateAfterSlideTransition();
- }
- } else if (type === 'reset') {
- el.css(slider.animProp, propValue);
- } else if (type === 'ticker') {
- // make the transition use 'linear'
- el.css('-' + slider.cssPrefix + '-transition-timing-function', 'linear');
- el.css(slider.animProp, propValue);
- if (duration !== 0) {
- el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
- //make sure it's the correct one
- if (!$(e.target).is(el)) { return; }
- // unbind the callback
- el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
- // reset the position
- setPositionProperty(params.resetValue, 'reset', 0);
- // start the loop again
- tickerLoop();
- });
- } else { //duration = 0
- setPositionProperty(params.resetValue, 'reset', 0);
- tickerLoop();
- }
- }
- // use JS animate
- } else {
- animateObj = {};
- animateObj[slider.animProp] = value;
- if (type === 'slide') {
- el.animate(animateObj, duration, slider.settings.easing, function() {
- updateAfterSlideTransition();
- });
- } else if (type === 'reset') {
- el.css(slider.animProp, value);
- } else if (type === 'ticker') {
- el.animate(animateObj, duration, 'linear', function() {
- setPositionProperty(params.resetValue, 'reset', 0);
- // run the recursive loop after animation
- tickerLoop();
- });
- }
- }
- };
- /**
- * Populates the pager with proper amount of pages
- */
- var populatePager = function() {
- var pagerHtml = '',
- linkContent = '',
- pagerQty = getPagerQty();
- // loop through each pager item
- for (var i = 0; i < pagerQty; i++) {
- linkContent = '';
- // if a buildPager function is supplied, use it to get pager link value, else use index + 1
- if (slider.settings.buildPager && $.isFunction(slider.settings.buildPager) || slider.settings.pagerCustom) {
- linkContent = slider.settings.buildPager(i);
- slider.pagerEl.addClass('bx-custom-pager');
- } else {
- linkContent = i + 1;
- slider.pagerEl.addClass('bx-default-pager');
- }
- // var linkContent = slider.settings.buildPager && $.isFunction(slider.settings.buildPager) ? slider.settings.buildPager(i) : i + 1;
- // add the markup to the string
- pagerHtml += '<div class="bx-pager-item"><a href="" data-slide-index="' + i + '" class="bx-pager-link">' + linkContent + '</a></div>';
- }
- // populate the pager element with pager links
- slider.pagerEl.html(pagerHtml);
- };
- /**
- * Appends the pager to the controls element
- */
- var appendPager = function() {
- if (!slider.settings.pagerCustom) {
- // create the pager DOM element
- slider.pagerEl = $('<div class="bx-pager" />');
- // if a pager selector was supplied, populate it with the pager
- if (slider.settings.pagerSelector) {
- $(slider.settings.pagerSelector).html(slider.pagerEl);
- // if no pager selector was supplied, add it after the wrapper
- } else {
- slider.controls.el.addClass('bx-has-pager').append(slider.pagerEl);
- }
- // populate the pager
- populatePager();
- } else {
- slider.pagerEl = $(slider.settings.pagerCustom);
- }
- // assign the pager click binding
- slider.pagerEl.on('click touchend', 'a', clickPagerBind);
- };
- /**
- * Appends prev / next controls to the controls element
- */
- var appendControls = function() {
- slider.controls.next = $('<a class="bx-next" href="">' + slider.settings.nextText + '</a>');
- slider.controls.prev = $('<a class="bx-prev" href="">' + slider.settings.prevText + '</a>');
- // bind click actions to the controls
- slider.controls.next.bind('click touchend', clickNextBind);
- slider.controls.prev.bind('click touchend', clickPrevBind);
- // if nextSelector was supplied, populate it
- if (slider.settings.nextSelector) {
- $(slider.settings.nextSelector).append(slider.controls.next);
- }
- // if prevSelector was supplied, populate it
- if (slider.settings.prevSelector) {
- $(slider.settings.prevSelector).append(slider.controls.prev);
- }
- // if no custom selectors were supplied
- if (!slider.settings.nextSelector && !slider.settings.prevSelector) {
- // add the controls to the DOM
- slider.controls.directionEl = $('<div class="bx-controls-direction" />');
- // add the control elements to the directionEl
- slider.controls.directionEl.append(slider.controls.prev).append(slider.controls.next);
- // slider.viewport.append(slider.controls.directionEl);
- slider.controls.el.addClass('bx-has-controls-direction').append(slider.controls.directionEl);
- }
- };
- /**
- * Appends start / stop auto controls to the controls element
- */
- var appendControlsAuto = function() {
- slider.controls.start = $('<div class="bx-controls-auto-item"><a class="bx-start" href="">' + slider.settings.startText + '</a></div>');
- slider.controls.stop = $('<div class="bx-controls-auto-item"><a class="bx-stop" href="">' + slider.settings.stopText + '</a></div>');
- // add the controls to the DOM
- slider.controls.autoEl = $('<div class="bx-controls-auto" />');
- // bind click actions to the controls
- slider.controls.autoEl.on('click', '.bx-start', clickStartBind);
- slider.controls.autoEl.on('click', '.bx-stop', clickStopBind);
- // if autoControlsCombine, insert only the "start" control
- if (slider.settings.autoControlsCombine) {
- slider.controls.autoEl.append(slider.controls.start);
- // if autoControlsCombine is false, insert both controls
- } else {
- slider.controls.autoEl.append(slider.controls.start).append(slider.controls.stop);
- }
- // if auto controls selector was supplied, populate it with the controls
- if (slider.settings.autoControlsSelector) {
- $(slider.settings.autoControlsSelector).html(slider.controls.autoEl);
- // if auto controls selector was not supplied, add it after the wrapper
- } else {
- slider.controls.el.addClass('bx-has-controls-auto').append(slider.controls.autoEl);
- }
- // update the auto controls
- updateAutoControls(slider.settings.autoStart ? 'stop' : 'start');
- };
- /**
- * Appends image captions to the DOM
- */
- var appendCaptions = function() {
- // cycle through each child
- slider.children.each(function(index) {
- // get the image title attribute
- var title = $(this).find('img:first').attr('title');
- // append the caption
- if (title !== undefined && ('' + title).length) {
- $(this).append('<div class="bx-caption"><span>' + title + '</span></div>');
- }
- });
- };
- /**
- * Click next binding
- *
- * @param e (event)
- * - DOM event object
- */
- var clickNextBind = function(e) {
- e.preventDefault();
- if (slider.controls.el.hasClass('disabled')) { return; }
- // if auto show is running, stop it
- if (slider.settings.auto && slider.settings.stopAutoOnClick) { el.stopAuto(); }
- el.goToNextSlide();
- };
- /**
- * Click prev binding
- *
- * @param e (event)
- * - DOM event object
- */
- var clickPrevBind = function(e) {
- e.preventDefault();
- if (slider.controls.el.hasClass('disabled')) { return; }
- // if auto show is running, stop it
- if (slider.settings.auto && slider.settings.stopAutoOnClick) { el.stopAuto(); }
- el.goToPrevSlide();
- };
- /**
- * Click start binding
- *
- * @param e (event)
- * - DOM event object
- */
- var clickStartBind = function(e) {
- el.startAuto();
- e.preventDefault();
- };
- /**
- * Click stop binding
- *
- * @param e (event)
- * - DOM event object
- */
- var clickStopBind = function(e) {
- el.stopAuto();
- e.preventDefault();
- };
- /**
- * Click pager binding
- *
- * @param e (event)
- * - DOM event object
- */
- var clickPagerBind = function(e) {
- var pagerLink, pagerIndex;
- e.preventDefault();
- if (slider.controls.el.hasClass('disabled')) {
- return;
- }
- // if auto show is running, stop it
- if (slider.settings.auto && slider.settings.stopAutoOnClick) { el.stopAuto(); }
- pagerLink = $(e.currentTarget);
- if (pagerLink.attr('data-slide-index') !== undefined) {
- pagerIndex = parseInt(pagerLink.attr('data-slide-index'));
- // if clicked pager link is not active, continue with the goToSlide call
- if (pagerIndex !== slider.active.index) { el.goToSlide(pagerIndex); }
- }
- };
- /**
- * Updates the pager links with an active class
- *
- * @param slideIndex (int)
- * - index of slide to make active
- */
- var updatePagerActive = function(slideIndex) {
- // if "short" pager type
- var len = slider.children.length; // nb of children
- if (slider.settings.pagerType === 'short') {
- if (slider.settings.maxSlides > 1) {
- len = Math.ceil(slider.children.length / slider.settings.maxSlides);
- }
- slider.pagerEl.html((slideIndex + 1) + slider.settings.pagerShortSeparator + len);
- return;
- }
- // remove all pager active classes
- slider.pagerEl.find('a').removeClass('active');
- // apply the active class for all pagers
- slider.pagerEl.each(function(i, el) { $(el).find('a').eq(slideIndex).addClass('active'); });
- };
- /**
- * Performs needed actions after a slide transition
- */
- var updateAfterSlideTransition = function() {
- // if infinite loop is true
- if (slider.settings.infiniteLoop) {
- var position = '';
- // first slide
- if (slider.active.index === 0) {
- // set the new position
- position = slider.children.eq(0).position();
- // carousel, last slide
- } else if (slider.active.index === getPagerQty() - 1 && slider.carousel) {
- position = slider.children.eq((getPagerQty() - 1) * getMoveBy()).position();
- // last slide
- } else if (slider.active.index === slider.children.length - 1) {
- position = slider.children.eq(slider.children.length - 1).position();
- }
- if (position) {
- if (slider.settings.mode === 'horizontal') { setPositionProperty(-position.left, 'reset', 0); }
- else if (slider.settings.mode === 'vertical') { setPositionProperty(-position.top, 'reset', 0); }
- }
- }
- // declare that the transition is complete
- slider.working = false;
- // onSlideAfter callback
- slider.settings.onSlideAfter.call(el, slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
- };
- /**
- * Updates the auto controls state (either active, or combined switch)
- *
- * @param state (string) "start", "stop"
- * - the new state of the auto show
- */
- var updateAutoControls = function(state) {
- // if autoControlsCombine is true, replace the current control with the new state
- if (slider.settings.autoControlsCombine) {
- slider.controls.autoEl.html(slider.controls[state]);
- // if autoControlsCombine is false, apply the "active" class to the appropriate control
- } else {
- slider.controls.autoEl.find('a').removeClass('active');
- slider.controls.autoEl.find('a:not(.bx-' + state + ')').addClass('active');
- }
- };
- /**
- * Updates the direction controls (checks if either should be hidden)
- */
- var updateDirectionControls = function() {
- if (getPagerQty() === 1) {
- slider.controls.prev.addClass('disabled');
- slider.controls.next.addClass('disabled');
- } else if (!slider.settings.infiniteLoop && slider.settings.hideControlOnEnd) {
- // if first slide
- if (slider.active.index === 0) {
- slider.controls.prev.addClass('disabled');
- slider.controls.next.removeClass('disabled');
- // if last slide
- } else if (slider.active.index === getPagerQty() - 1) {
- slider.controls.next.addClass('disabled');
- slider.controls.prev.removeClass('disabled');
- // if any slide in the middle
- } else {
- slider.controls.prev.removeClass('disabled');
- slider.controls.next.removeClass('disabled');
- }
- }
- };
- /**
- * Initializes the auto process
- */
- var initAuto = function() {
- // if autoDelay was supplied, launch the auto show using a setTimeout() call
- if (slider.settings.autoDelay > 0) {
- var timeout = setTimeout(el.startAuto, slider.settings.autoDelay);
- // if autoDelay was not supplied, start the auto show normally
- } else {
- el.startAuto();
- //add focus and blur events to ensure its running if timeout gets paused
- $(window).focus(function() {
- el.startAuto();
- }).blur(function() {
- el.stopAuto();
- });
- }
- // if autoHover is requested
- if (slider.settings.autoHover) {
- // on el hover
- el.hover(function() {
- // if the auto show is currently playing (has an active interval)
- if (slider.interval) {
- // stop the auto show and pass true argument which will prevent control update
- el.stopAuto(true);
- // create a new autoPaused value which will be used by the relative "mouseout" event
- slider.autoPaused = true;
- }
- }, function() {
- // if the autoPaused value was created be the prior "mouseover" event
- if (slider.autoPaused) {
- // start the auto show and pass true argument which will prevent control update
- el.startAuto(true);
- // reset the autoPaused value
- slider.autoPaused = null;
- }
- });
- }
- };
- /**
- * Initializes the ticker process
- */
- var initTicker = function() {
- var startPosition = 0,
- position, transform, value, idx, ratio, property, newSpeed, totalDimens;
- // if autoDirection is "next", append a clone of the entire slider
- if (slider.settings.autoDirection === 'next') {
- el.append(slider.children.clone().addClass('bx-clone'));
- // if autoDirection is "prev", prepend a clone of the entire slider, and set the left position
- } else {
- el.prepend(slider.children.clone().addClass('bx-clone'));
- position = slider.children.first().position();
- startPosition = slider.settings.mode === 'horizontal' ? -position.left : -position.top;
- }
- setPositionProperty(startPosition, 'reset', 0);
- // do not allow controls in ticker mode
- slider.settings.pager = false;
- slider.settings.controls = false;
- slider.settings.autoControls = false;
- // if autoHover is requested
- if (slider.settings.tickerHover) {
- if (slider.usingCSS) {
- idx = slider.settings.mode === 'horizontal' ? 4 : 5;
- slider.viewport.hover(function() {
- transform = el.css('-' + slider.cssPrefix + '-transform');
- value = parseFloat(transform.split(',')[idx]);
- setPositionProperty(value, 'reset', 0);
- }, function() {
- totalDimens = 0;
- slider.children.each(function(index) {
- totalDimens += slider.settings.mode === 'horizontal' ? $(this).outerWidth(true) : $(this).outerHeight(true);
- });
- // calculate the speed ratio (used to determine the new speed to finish the paused animation)
- ratio = slider.settings.speed / totalDimens;
- // determine which property to use
- property = slider.settings.mode === 'horizontal' ? 'left' : 'top';
- // calculate the new speed
- newSpeed = ratio * (totalDimens - (Math.abs(parseInt(value))));
- tickerLoop(newSpeed);
- });
- } else {
- // on el hover
- slider.viewport.hover(function() {
- el.stop();
- }, function() {
- // calculate the total width of children (used to calculate the speed ratio)
- totalDimens = 0;
- slider.children.each(function(index) {
- totalDimens += slider.settings.mode === 'horizontal' ? $(this).outerWidth(true) : $(this).outerHeight(true);
- });
- // calculate the speed ratio (used to determine the new speed to finish the paused animation)
- ratio = slider.settings.speed / totalDimens;
- // determine which property to use
- property = slider.settings.mode === 'horizontal' ? 'left' : 'top';
- // calculate the new speed
- newSpeed = ratio * (totalDimens - (Math.abs(parseInt(el.css(property)))));
- tickerLoop(newSpeed);
- });
- }
- }
- // start the ticker loop
- tickerLoop();
- };
- /**
- * Runs a continuous loop, news ticker-style
- */
- var tickerLoop = function(resumeSpeed) {
- var speed = resumeSpeed ? resumeSpeed : slider.settings.speed,
- position = {left: 0, top: 0},
- reset = {left: 0, top: 0},
- animateProperty, resetValue, params;
- // if "next" animate left position to last child, then reset left to 0
- if (slider.settings.autoDirection === 'next') {
- position = el.find('.bx-clone').first().position();
- // if "prev" animate left position to 0, then reset left to first non-clone child
- } else {
- reset = slider.children.first().position();
- }
- animateProperty = slider.settings.mode === 'horizontal' ? -position.left : -position.top;
- resetValue = slider.settings.mode === 'horizontal' ? -reset.left : -reset.top;
- params = {resetValue: resetValue};
- setPositionProperty(animateProperty, 'ticker', speed, params);
- };
- /**
- * Check if el is on screen
- */
- var isOnScreen = function(el) {
- var win = $(window),
- viewport = {
- top: win.scrollTop(),
- left: win.scrollLeft()
- },
- bounds = el.offset();
- viewport.right = viewport.left + win.width();
- viewport.bottom = viewport.top + win.height();
- bounds.right = bounds.left + el.outerWidth();
- bounds.bottom = bounds.top + el.outerHeight();
- return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
- };
- /**
- * Initializes keyboard events
- */
- var keyPress = function(e) {
- var activeElementTag = document.activeElement.tagName.toLowerCase(),
- tagFilters = 'input|textarea',
- p = new RegExp(activeElementTag,['i']),
- result = p.exec(tagFilters);
- if (result == null && isOnScreen(el)) {
- if (e.keyCode === 39) {
- clickNextBind(e);
- return false;
- } else if (e.keyCode === 37) {
- clickPrevBind(e);
- return false;
- }
- }
- };
- /**
- * Initializes touch events
- */
- var initTouch = function() {
- // initialize object to contain all touch values
- slider.touch = {
- start: {x: 0, y: 0},
- end: {x: 0, y: 0}
- };
- slider.viewport.bind('touchstart MSPointerDown pointerdown', onTouchStart);
- //for browsers that have implemented pointer events and fire a click after
- //every pointerup regardless of whether pointerup is on same screen location as pointerdown or not
- slider.viewport.on('click', '.bxslider a', function(e) {
- if (slider.viewport.hasClass('click-disabled')) {
- e.preventDefault();
- slider.viewport.removeClass('click-disabled');
- }
- });
- };
- /**
- * Event handler for "touchstart"
- *
- * @param e (event)
- * - DOM event object
- */
- var onTouchStart = function(e) {
- //disable slider controls while user is interacting with slides to avoid slider freeze that happens on touch devices when a slide swipe happens immediately after interacting with slider controls
- slider.controls.el.addClass('disabled');
- if (slider.working) {
- e.preventDefault();
- slider.controls.el.removeClass('disabled');
- } else {
- // record the original position when touch starts
- slider.touch.originalPos = el.position();
- var orig = e.originalEvent,
- touchPoints = (typeof orig.changedTouches !== 'undefined') ? orig.changedTouches : [orig];
- // fix for https://github.com/stevenwanderski/bxslider-4/issues/1086
- var chromePointerEvents = typeof PointerEvent === 'function';
- if (chromePointerEvents && orig.pointerId === undefined) {
- return;
- }
- // end fix
- // record the starting touch x, y coordinates
- slider.touch.start.x = touchPoints[0].pageX;
- slider.touch.start.y = touchPoints[0].pageY;
- if (slider.viewport.get(0).setPointerCapture) {
- slider.pointerId = orig.pointerId;
- if(slider.pointerId === 1) {
- slider.viewport.get(0).setPointerCapture(slider.pointerId);
- }
- }
- // bind a "touchmove" event to the viewport
- slider.viewport.bind('touchmove MSPointerMove pointermove', onTouchMove);
- // bind a "touchend" event to the viewport
- slider.viewport.bind('touchend MSPointerUp pointerup', onTouchEnd);
- slider.viewport.bind('MSPointerCancel pointercancel', onPointerCancel);
- }
- };
- /**
- * Cancel Pointer for Windows Phone
- *
- * @param e (event)
- * - DOM event object
- */
- var onPointerCancel = function(e) {
- /* onPointerCancel handler is needed to deal with situations when a touchend
- doesn't fire after a touchstart (this happens on windows phones only) */
- setPositionProperty(slider.touch.originalPos.left, 'reset', 0);
- //remove handlers
- slider.controls.el.removeClass('disabled');
- slider.viewport.unbind('MSPointerCancel pointercancel', onPointerCancel);
- slider.viewport.unbind('touchmove MSPointerMove pointermove', onTouchMove);
- slider.viewport.unbind('touchend MSPointerUp pointerup', onTouchEnd);
- if (slider.viewport.get(0).releasePointerCapture) {
- slider.viewport.get(0).releasePointerCapture(slider.pointerId);
- }
- };
- /**
- * Event handler for "touchmove"
- *
- * @param e (event)
- * - DOM event object
- */
- var onTouchMove = function(e) {
- var orig = e.originalEvent,
- touchPoints = (typeof orig.changedTouches !== 'undefined') ? orig.changedTouches : [orig],
- // if scrolling on y axis, do not prevent default
- xMovement = Math.abs(touchPoints[0].pageX - slider.touch.start.x),
- yMovement = Math.abs(touchPoints[0].pageY - slider.touch.start.y),
- value = 0,
- change = 0;
- // x axis swipe
- if ((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX) {
- e.preventDefault();
- // y axis swipe
- } else if ((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY) {
- e.preventDefault();
- }
- if (slider.settings.mode !== 'fade' && slider.settings.oneToOneTouch) {
- // if horizontal, drag along x axis
- if (slider.settings.mode === 'horizontal') {
- change = touchPoints[0].pageX - slider.touch.start.x;
- value = slider.touch.originalPos.left + change;
- // if vertical, drag along y axis
- } else {
- change = touchPoints[0].pageY - slider.touch.start.y;
- value = slider.touch.originalPos.top + change;
- }
- setPositionProperty(value, 'reset', 0);
- }
- };
- /**
- * Event handler for "touchend"
- *
- * @param e (event)
- * - DOM event object
- */
- var onTouchEnd = function(e) {
- slider.viewport.unbind('touchmove MSPointerMove pointermove', onTouchMove);
- //enable slider controls as soon as user stops interacing with slides
- slider.controls.el.removeClass('disabled');
- var orig = e.originalEvent,
- touchPoints = (typeof orig.changedTouches !== 'undefined') ? orig.changedTouches : [orig],
- value = 0,
- distance = 0;
- // record end x, y positions
- slider.touch.end.x = touchPoints[0].pageX;
- slider.touch.end.y = touchPoints[0].pageY;
- // if fade mode, check if absolute x distance clears the threshold
- if (slider.settings.mode === 'fade') {
- distance = Math.abs(slider.touch.start.x - slider.touch.end.x);
- if (distance >= slider.settings.swipeThreshold) {
- if (slider.touch.start.x > slider.touch.end.x) {
- el.goToNextSlide();
- } else {
- el.goToPrevSlide();
- }
- el.stopAuto();
- }
- // not fade mode
- } else {
- // calculate distance and el's animate property
- if (slider.settings.mode === 'horizontal') {
- distance = slider.touch.end.x - slider.touch.start.x;
- value = slider.touch.originalPos.left;
- } else {
- distance = slider.touch.end.y - slider.touch.start.y;
- value = slider.touch.originalPos.top;
- }
- // if not infinite loop and first / last slide, do not attempt a slide transition
- if (!slider.settings.infiniteLoop && ((slider.active.index === 0 && distance > 0) || (slider.active.last && distance < 0))) {
- setPositionProperty(value, 'reset', 200);
- } else {
- // check if distance clears threshold
- if (Math.abs(distance) >= slider.settings.swipeThreshold) {
- if (distance < 0) {
- el.goToNextSlide();
- } else {
- el.goToPrevSlide();
- }
- el.stopAuto();
- } else {
- // el.animate(property, 200);
- setPositionProperty(value, 'reset', 200);
- }
- }
- }
- slider.viewport.unbind('touchend MSPointerUp pointerup', onTouchEnd);
- if (slider.viewport.get(0).releasePointerCapture) {
- slider.viewport.get(0).releasePointerCapture(slider.pointerId);
- }
- };
- /**
- * Window resize event callback
- */
- var resizeWindow = function(e) {
- // don't do anything if slider isn't initialized.
- if (!slider.initialized) { return; }
- // Delay if slider working.
- if (slider.working) {
- window.setTimeout(resizeWindow, 10);
- } else {
- // get the new window dimens (again, thank you IE)
- var windowWidthNew = $(window).width(),
- windowHeightNew = $(window).height();
- // make sure that it is a true window resize
- // *we must check this because our dinosaur friend IE fires a window resize event when certain DOM elements
- // are resized. Can you just die already?*
- if (windowWidth !== windowWidthNew || windowHeight !== windowHeightNew) {
- // set the new window dimens
- windowWidth = windowWidthNew;
- windowHeight = windowHeightNew;
- // update all dynamic elements
- el.redrawSlider();
- // Call user resize handler
- slider.settings.onSliderResize.call(el, slider.active.index);
- }
- }
- };
- /**
- * Adds an aria-hidden=true attribute to each element
- *
- * @param startVisibleIndex (int)
- * - the first visible element's index
- */
- var applyAriaHiddenAttributes = function(startVisibleIndex) {
- var numberOfSlidesShowing = getNumberSlidesShowing();
- // only apply attributes if the setting is enabled and not in ticker mode
- if (slider.settings.ariaHidden && !slider.settings.ticker) {
- // add aria-hidden=true to all elements
- slider.children.attr('aria-hidden', 'true');
- // get the visible elements and change to aria-hidden=false
- slider.children.slice(startVisibleIndex, startVisibleIndex + numberOfSlidesShowing).attr('aria-hidden', 'false');
- }
- };
- /**
- * Returns index according to present page range
- *
- * @param slideOndex (int)
- * - the desired slide index
- */
- var setSlideIndex = function(slideIndex) {
- if (slideIndex < 0) {
- if (slider.settings.infiniteLoop) {
- return getPagerQty() - 1;
- }else {
- //we don't go to undefined slides
- return slider.active.index;
- }
- // if slideIndex is greater than children length, set active index to 0 (this happens during infinite loop)
- } else if (slideIndex >= getPagerQty()) {
- if (slider.settings.infiniteLoop) {
- return 0;
- } else {
- //we don't move to undefined pages
- return slider.active.index;
- }
- // set active index to requested slide
- } else {
- return slideIndex;
- }
- };
- /**
- * ===================================================================================
- * = PUBLIC FUNCTIONS
- * ===================================================================================
- */
- /**
- * Performs slide transition to the specified slide
- *
- * @param slideIndex (int)
- * - the destination slide's index (zero-based)
- *
- * @param direction (string)
- * - INTERNAL USE ONLY - the direction of travel ("prev" / "next")
- */
- el.goToSlide = function(slideIndex, direction) {
- // onSlideBefore, onSlideNext, onSlidePrev callbacks
- // Allow transition canceling based on returned value
- var performTransition = true,
- moveBy = 0,
- position = {left: 0, top: 0},
- lastChild = null,
- lastShowingIndex, eq, value, requestEl;
- // store the old index
- slider.oldIndex = slider.active.index;
- //set new index
- slider.active.index = setSlideIndex(slideIndex);
- // if plugin is currently in motion, ignore request
- if (slider.working || slider.active.index === slider.oldIndex) { return; }
- // declare that plugin is in motion
- slider.working = true;
- performTransition = slider.settings.onSlideBefore.call(el, slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
- // If transitions canceled, reset and return
- if (typeof (performTransition) !== 'undefined' && !performTransition) {
- slider.active.index = slider.oldIndex; // restore old index
- slider.working = false; // is not in motion
- return;
- }
- if (direction === 'next') {
- // Prevent canceling in future functions or lack there-of from negating previous commands to cancel
- if (!slider.settings.onSlideNext.call(el, slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index)) {
- performTransition = false;
- }
- } else if (direction === 'prev') {
- // Prevent canceling in future functions or lack there-of from negating previous commands to cancel
- if (!slider.settings.onSlidePrev.call(el, slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index)) {
- performTransition = false;
- }
- }
- // check if last slide
- slider.active.last = slider.active.index >= getPagerQty() - 1;
- // update the pager with active class
- if (slider.settings.pager || slider.settings.pagerCustom) { updatePagerActive(slider.active.index); }
- // // check for direction control update
- if (slider.settings.controls) { updateDirectionControls(); }
- // if slider is set to mode: "fade"
- if (slider.settings.mode === 'fade') {
- // if adaptiveHeight is true and next height is different from current height, animate to the new height
- if (slider.settings.adaptiveHeight && slider.viewport.height() !== getViewportHeight()) {
- slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
- }
- // fade out the visible child and reset its z-index value
- slider.children.filter(':visible').fadeOut(slider.settings.speed).css({zIndex: 0});
- // fade in the newly requested slide
- slider.children.eq(slider.active.index).css('zIndex', slider.settings.slideZIndex + 1).fadeIn(slider.settings.speed, function() {
- $(this).css('zIndex', slider.settings.slideZIndex);
- updateAfterSlideTransition();
- });
- // slider mode is not "fade"
- } else {
- // if adaptiveHeight is true and next height is different from current height, animate to the new height
- if (slider.settings.adaptiveHeight && slider.viewport.height() !== getViewportHeight()) {
- slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
- }
- // if carousel and not infinite loop
- if (!slider.settings.infiniteLoop && slider.carousel && slider.active.last) {
- if (slider.settings.mode === 'horizontal') {
- // get the last child position
- lastChild = slider.children.eq(slider.children.length - 1);
- position = lastChild.position();
- // calculate the position of the last slide
- moveBy = slider.viewport.width() - lastChild.outerWidth();
- } else {
- // get last showing index position
- lastShowingIndex = slider.children.length - slider.settings.minSlides;
- position = slider.children.eq(lastShowingIndex).position();
- }
- // horizontal carousel, going previous while on first slide (infiniteLoop mode)
- } else if (slider.carousel && slider.active.last && direction === 'prev') {
- // get the last child position
- eq = slider.settings.moveSlides === 1 ? slider.settings.maxSlides - getMoveBy() : ((getPagerQty() - 1) * getMoveBy()) - (slider.children.length - slider.settings.maxSlides);
- lastChild = el.children('.bx-clone').eq(eq);
- position = lastChild.position();
- // if infinite loop and "Next" is clicked on the last slide
- } else if (direction === 'next' && slider.active.index === 0) {
- // get the last clone position
- position = el.find('> .bx-clone').eq(slider.settings.maxSlides).position();
- slider.active.last = false;
- // normal non-zero requests
- } else if (slideIndex >= 0) {
- //parseInt is applied to allow floats for slides/page
- requestEl = slideIndex * parseInt(getMoveBy());
- position = slider.children.eq(requestEl).position();
- }
- /* If the position doesn't exist
- * (e.g. if you destroy the slider on a next click),
- * it doesn't throw an error.
- */
- if (typeof (position) !== 'undefined') {
- value = slider.settings.mode === 'horizontal' ? -(position.left - moveBy) : -position.top;
- // plugin values to be animated
- setPositionProperty(value, 'slide', slider.settings.speed);
- } else {
- slider.working = false;
- }
- }
- if (slider.settings.ariaHidden) { applyAriaHiddenAttributes(slider.active.index * getMoveBy()); }
- };
- /**
- * Transitions to the next slide in the show
- */
- el.goToNextSlide = function() {
- // if infiniteLoop is false and last page is showing, disregard call
- if (!slider.settings.infiniteLoop && slider.active.last) { return; }
- var pagerIndex = parseInt(slider.active.index) + 1;
- el.goToSlide(pagerIndex, 'next');
- };
- /**
- * Transitions to the prev slide in the show
- */
- el.goToPrevSlide = function() {
- // if infiniteLoop is false and last page is showing, disregard call
- if (!slider.settings.infiniteLoop && slider.active.index === 0) { return; }
- var pagerIndex = parseInt(slider.active.index) - 1;
- el.goToSlide(pagerIndex, 'prev');
- };
- /**
- * Starts the auto show
- *
- * @param preventControlUpdate (boolean)
- * - if true, auto controls state will not be updated
- */
- el.startAuto = function(preventControlUpdate) {
- // if an interval already exists, disregard call
- if (slider.interval) { return; }
- // create an interval
- slider.interval = setInterval(function() {
- if (slider.settings.autoDirection === 'next') {
- el.goToNextSlide();
- } else {
- el.goToPrevSlide();
- }
- }, slider.settings.pause);
- // if auto controls are displayed and preventControlUpdate is not true
- if (slider.settings.autoControls && preventControlUpdate !== true) { updateAutoControls('stop'); }
- };
- /**
- * Stops the auto show
- *
- * @param preventControlUpdate (boolean)
- * - if true, auto controls state will not be updated
- */
- el.stopAuto = function(preventControlUpdate) {
- // if no interval exists, disregard call
- if (!slider.interval) { return; }
- // clear the interval
- clearInterval(slider.interval);
- slider.interval = null;
- // if auto controls are displayed and preventControlUpdate is not true
- if (slider.settings.autoControls && preventControlUpdate !== true) { updateAutoControls('start'); }
- };
- /**
- * Returns current slide index (zero-based)
- */
- el.getCurrentSlide = function() {
- return slider.active.index;
- };
- /**
- * Returns current slide element
- */
- el.getCurrentSlideElement = function() {
- return slider.children.eq(slider.active.index);
- };
- /**
- * Returns a slide element
- * @param index (int)
- * - The index (zero-based) of the element you want returned.
- */
- el.getSlideElement = function(index) {
- return slider.children.eq(index);
- };
- /**
- * Returns number of slides in show
- */
- el.getSlideCount = function() {
- return slider.children.length;
- };
- /**
- * Return slider.working variable
- */
- el.isWorking = function() {
- return slider.working;
- };
- /**
- * Update all dynamic slider elements
- */
- el.redrawSlider = function() {
- // resize all children in ratio to new screen size
- slider.children.add(el.find('.bx-clone')).outerWidth(getSlideWidth());
- // adjust the height
- slider.viewport.css('height', getViewportHeight());
- // update the slide position
- if (!slider.settings.ticker) { setSlidePosition(); }
- // if active.last was true before the screen resize, we want
- // to keep it last no matter what screen size we end on
- if (slider.active.last) { slider.active.index = getPagerQty() - 1; }
- // if the active index (page) no longer exists due to the resize, simply set the index as last
- if (slider.active.index >= getPagerQty()) { slider.active.last = true; }
- // if a pager is being displayed and a custom pager is not being used, update it
- if (slider.settings.pager && !slider.settings.pagerCustom) {
- populatePager();
- updatePagerActive(slider.active.index);
- }
- if (slider.settings.ariaHidden) { applyAriaHiddenAttributes(slider.active.index * getMoveBy()); }
- };
- /**
- * Destroy the current instance of the slider (revert everything back to original state)
- */
- el.destroySlider = function() {
- // don't do anything if slider has already been destroyed
- if (!slider.initialized) { return; }
- slider.initialized = false;
- $('.bx-clone', this).remove();
- slider.children.each(function() {
- if ($(this).data('origStyle') !== undefined) {
- $(this).attr('style', $(this).data('origStyle'));
- } else {
- $(this).removeAttr('style');
- }
- });
- if ($(this).data('origStyle') !== undefined) {
- this.attr('style', $(this).data('origStyle'));
- } else {
- $(this).removeAttr('style');
- }
- $(this).unwrap().unwrap();
- if (slider.controls.el) { slider.controls.el.remove(); }
- if (slider.controls.next) { slider.controls.next.remove(); }
- if (slider.controls.prev) { slider.controls.prev.remove(); }
- if (slider.pagerEl && slider.settings.controls && !slider.settings.pagerCustom) { slider.pagerEl.remove(); }
- $('.bx-caption', this).remove();
- if (slider.controls.autoEl) { slider.controls.autoEl.remove(); }
- clearInterval(slider.interval);
- if (slider.settings.responsive) { $(window).unbind('resize', resizeWindow); }
- if (slider.settings.keyboardEnabled) { $(document).unbind('keydown', keyPress); }
- //remove self reference in data
- $(this).removeData('bxSlider');
- };
- /**
- * Reload the slider (revert all DOM changes, and re-initialize)
- */
- el.reloadSlider = function(settings) {
- if (settings !== undefined) { options = settings; }
- el.destroySlider();
- init();
- //store reference to self in order to access public functions later
- $(el).data('bxSlider', this);
- };
- init();
- $(el).data('bxSlider', this);
- // returns the current jQuery object
- return this;
- };
- })(jQuery);
|