This commit is contained in:
2024-04-25 23:50:02 +03:00
parent 5f7f687482
commit bc16ad2846
2 changed files with 199 additions and 127 deletions
+117 -46
View File
@@ -1,6 +1,7 @@
/** /**
* bxSlider v4.2.12 * bxSlider v4.2.1d
* Copyright 2013-2015 Steven Wanderski * Copyright 2013-2017 Steven Wanderski
* fix https://github.com/stevenwanderski/bxslider-4/issues/1240#issuecomment-482294169
* Written while drinking Belgian ales and listening to jazz * Written while drinking Belgian ales and listening to jazz
* Licensed under MIT (http://opensource.org/licenses/MIT) * Licensed under MIT (http://opensource.org/licenses/MIT)
*/ */
@@ -88,7 +89,8 @@
onSlideAfter: function() { return true; }, onSlideAfter: function() { return true; },
onSlideNext: function() { return true; }, onSlideNext: function() { return true; },
onSlidePrev: function() { return true; }, onSlidePrev: function() { return true; },
onSliderResize: function() { return true; } onSliderResize: function() { return true; },
onAutoChange: function() { return true; } //calls when auto slides starts and stops
}; };
$.fn.bxSlider = function(options) { $.fn.bxSlider = function(options) {
@@ -142,7 +144,7 @@
// store active slide information // store active slide information
slider.active = { index: slider.settings.startSlide }; slider.active = { index: slider.settings.startSlide };
// store if the slider is in carousel mode (displaying / moving multiple slides) // store if the slider is in carousel mode (displaying / moving multiple slides)
slider.carousel = slider.settings.minSlides > 1 || slider.settings.maxSlides > 1 ? true : false; slider.carousel = slider.settings.minSlides > 1 || slider.settings.maxSlides > 1;
// if carousel, force preloadImages = 'all' // if carousel, force preloadImages = 'all'
if (slider.carousel) { slider.settings.preloadImages = 'all'; } if (slider.carousel) { slider.settings.preloadImages = 'all'; }
// calculate the min / max width thresholds based on min / max number of slides // calculate the min / max width thresholds based on min / max number of slides
@@ -227,7 +229,8 @@
}); });
// apply css to all slider children // apply css to all slider children
slider.children.css({ slider.children.css({
float: slider.settings.mode === 'horizontal' ? 'left' : 'none', // the float attribute is a reserved word in compressors like YUI compressor and need to be quoted #48
'float': slider.settings.mode === 'horizontal' ? 'left' : 'none',
listStyle: 'none', listStyle: 'none',
position: 'relative' position: 'relative'
}); });
@@ -254,7 +257,13 @@
slider.active.last = slider.settings.startSlide === getPagerQty() - 1; slider.active.last = slider.settings.startSlide === getPagerQty() - 1;
// if video is true, set up the fitVids plugin // if video is true, set up the fitVids plugin
if (slider.settings.video) { el.fitVids(); } if (slider.settings.video) { el.fitVids(); }
if (slider.settings.preloadImages === 'all' || slider.settings.ticker) { preloadSelector = slider.children; } //preloadImages
if (slider.settings.preloadImages === 'none') {
preloadSelector = null;
}
else if (slider.settings.preloadImages === 'all' || slider.settings.ticker) {
preloadSelector = slider.children;
}
// only check for control addition if not in "ticker" mode // only check for control addition if not in "ticker" mode
if (!slider.settings.ticker) { if (!slider.settings.ticker) {
// if controls are requested, add them // if controls are requested, add them
@@ -269,7 +278,11 @@
} else { } else {
slider.settings.pager = false; slider.settings.pager = false;
} }
if (preloadSelector === null) {
start();
} else {
loadElements(preloadSelector, start); loadElements(preloadSelector, start);
}
}; };
var loadElements = function(selector, callback) { var loadElements = function(selector, callback) {
@@ -283,7 +296,7 @@
$(this).one('load error', function() { $(this).one('load error', function() {
if (++count === total) { callback(); } if (++count === total) { callback(); }
}).each(function() { }).each(function() {
if (this.complete) { $(this).trigger('load'); } if (this.complete || this.src == '') { $(this).trigger('load'); }
}); });
}); });
}; };
@@ -317,8 +330,8 @@
slider.settings.onSliderLoad.call(el, slider.active.index); slider.settings.onSliderLoad.call(el, slider.active.index);
// slider has been fully initialized // slider has been fully initialized
slider.initialized = true; slider.initialized = true;
// bind the resize call to the window // add the resize call to the window
if (slider.settings.responsive) { $(window).bind('resize', resizeWindow); } if (slider.settings.responsive) { $(window).on('resize', resizeWindow); }
// if auto is true and has more than 1 page, start the show // 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 (slider.settings.auto && slider.settings.autoStart && (getPagerQty() > 1 || slider.settings.autoSlideForOnePage)) { initAuto(); }
// if ticker is true, start the ticker // if ticker is true, start the ticker
@@ -448,7 +461,7 @@
} else { } else {
childWidth = slider.children.first().width() + slider.settings.slideMargin; childWidth = slider.children.first().width() + slider.settings.slideMargin;
slidesShowing = Math.floor((slider.viewport.width() + slidesShowing = Math.floor((slider.viewport.width() +
slider.settings.slideMargin) / childWidth); slider.settings.slideMargin) / childWidth) || 1;
} }
// if "vertical" mode, slides showing will always be minSlides // if "vertical" mode, slides showing will always be minSlides
} else if (slider.settings.mode === 'vertical') { } else if (slider.settings.mode === 'vertical') {
@@ -475,6 +488,7 @@
breakPoint = counter + getNumberSlidesShowing(); breakPoint = counter + getNumberSlidesShowing();
counter += slider.settings.moveSlides <= getNumberSlidesShowing() ? slider.settings.moveSlides : getNumberSlidesShowing(); counter += slider.settings.moveSlides <= getNumberSlidesShowing() ? slider.settings.moveSlides : getNumberSlidesShowing();
} }
return counter;
} }
// if moveSlides is 0 (auto) divide children length by sides showing, then round up // if moveSlides is 0 (auto) divide children length by sides showing, then round up
} else { } else {
@@ -557,12 +571,12 @@
// set the property value // set the property value
el.css(slider.animProp, propValue); el.css(slider.animProp, propValue);
if (duration !== 0) { if (duration !== 0) {
// bind a callback method - executes when CSS transition completes // add a callback method - executes when CSS transition completes
el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) { el.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
//make sure it's the correct one //make sure it's the correct one
if (!$(e.target).is(el)) { return; } if (!$(e.target).is(el)) { return; }
// unbind the callback // remove the callback
el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd'); el.off('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
updateAfterSlideTransition(); updateAfterSlideTransition();
}); });
} else { //duration = 0 } else { //duration = 0
@@ -575,11 +589,11 @@
el.css('-' + slider.cssPrefix + '-transition-timing-function', 'linear'); el.css('-' + slider.cssPrefix + '-transition-timing-function', 'linear');
el.css(slider.animProp, propValue); el.css(slider.animProp, propValue);
if (duration !== 0) { if (duration !== 0) {
el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) { el.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
//make sure it's the correct one //make sure it's the correct one
if (!$(e.target).is(el)) { return; } if (!$(e.target).is(el)) { return; }
// unbind the callback // remove the callback
el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd'); el.off('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
// reset the position // reset the position
setPositionProperty(params.resetValue, 'reset', 0); setPositionProperty(params.resetValue, 'reset', 0);
// start the loop again // start the loop again
@@ -665,9 +679,9 @@
var appendControls = function() { var appendControls = function() {
slider.controls.next = $('<a class="bx-next" href="">' + slider.settings.nextText + '</a>'); slider.controls.next = $('<a class="bx-next" href="">' + slider.settings.nextText + '</a>');
slider.controls.prev = $('<a class="bx-prev" href="">' + slider.settings.prevText + '</a>'); slider.controls.prev = $('<a class="bx-prev" href="">' + slider.settings.prevText + '</a>');
// bind click actions to the controls // add click actions to the controls
slider.controls.next.bind('click touchend', clickNextBind); slider.controls.next.on('click touchend', clickNextBind);
slider.controls.prev.bind('click touchend', clickPrevBind); slider.controls.prev.on('click touchend', clickPrevBind);
// if nextSelector was supplied, populate it // if nextSelector was supplied, populate it
if (slider.settings.nextSelector) { if (slider.settings.nextSelector) {
$(slider.settings.nextSelector).append(slider.controls.next); $(slider.settings.nextSelector).append(slider.controls.next);
@@ -695,7 +709,7 @@
slider.controls.stop = $('<div class="bx-controls-auto-item"><a class="bx-stop" href="">' + slider.settings.stopText + '</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 // add the controls to the DOM
slider.controls.autoEl = $('<div class="bx-controls-auto" />'); slider.controls.autoEl = $('<div class="bx-controls-auto" />');
// bind click actions to the controls // on click actions to the controls
slider.controls.autoEl.on('click', '.bx-start', clickStartBind); slider.controls.autoEl.on('click', '.bx-start', clickStartBind);
slider.controls.autoEl.on('click', '.bx-stop', clickStopBind); slider.controls.autoEl.on('click', '.bx-stop', clickStopBind);
// if autoControlsCombine, insert only the "start" control // if autoControlsCombine, insert only the "start" control
@@ -894,24 +908,22 @@
} }
} }
}; };
/* auto start and stop functions */
var windowFocusHandler = function() { el.startAuto(); };
var windowBlurHandler = function() { el.stopAuto(); };
/** /**
* Initializes the auto process * Initializes the auto process
*/ */
var initAuto = function() { var initAuto = function() {
// if autoDelay was supplied, launch the auto show using a setTimeout() call // if autoDelay was supplied, launch the auto show using a setTimeout() call
if (slider.settings.autoDelay > 0) { if (slider.settings.autoDelay > 0) {
var timeout = setTimeout(el.startAuto, slider.settings.autoDelay); setTimeout(el.startAuto, slider.settings.autoDelay);
// if autoDelay was not supplied, start the auto show normally // if autoDelay was not supplied, start the auto show normally
} else { } else {
el.startAuto(); el.startAuto();
//add focus and blur events to ensure its running if timeout gets paused //add focus and blur events to ensure its running if timeout gets paused
$(window).focus(function() { $(window).focus(windowFocusHandler).blur(windowBlurHandler);
el.startAuto();
}).blur(function() {
el.stopAuto();
});
} }
// if autoHover is requested // if autoHover is requested
if (slider.settings.autoHover) { if (slider.settings.autoHover) {
@@ -1071,7 +1083,7 @@
start: {x: 0, y: 0}, start: {x: 0, y: 0},
end: {x: 0, y: 0} end: {x: 0, y: 0}
}; };
slider.viewport.bind('touchstart MSPointerDown pointerdown', onTouchStart); slider.viewport.on('touchstart MSPointerDown pointerdown', onTouchStart);
//for browsers that have implemented pointer events and fire a click after //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 //every pointerup regardless of whether pointerup is on same screen location as pointerdown or not
@@ -1090,30 +1102,48 @@
* - DOM event object * - DOM event object
*/ */
var onTouchStart = function(e) { var onTouchStart = function(e) {
// watch only for left mouse, touch contact and pen contact
// touchstart event object doesn`t have button property
if (e.type !== 'touchstart' && e.button !== 0) {
return;
}
//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 //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'); slider.controls.el.addClass('disabled');
if (slider.working) { if (slider.working) {
e.preventDefault();
slider.controls.el.removeClass('disabled'); slider.controls.el.removeClass('disabled');
} else { } else {
// record the original position when touch starts // record the original position when touch starts
slider.touch.originalPos = el.position(); slider.touch.originalPos = el.position();
var orig = e.originalEvent, var orig = e.originalEvent,
touchPoints = (typeof orig.changedTouches !== 'undefined') ? orig.changedTouches : [orig]; touchPoints = (typeof orig.changedTouches !== 'undefined') ? orig.changedTouches : [orig];
var chromePointerEvents = typeof PointerEvent === 'function';
if (chromePointerEvents) {
if (orig.pointerId === undefined) {
return;
}
}
// record the starting touch x, y coordinates // record the starting touch x, y coordinates
slider.touch.start.x = touchPoints[0].pageX; slider.touch.start.x = touchPoints[0].pageX;
slider.touch.start.y = touchPoints[0].pageY; slider.touch.start.y = touchPoints[0].pageY;
slider.hasPointerCapture = false;
if (slider.viewport.get(0).setPointerCapture) { if (slider.viewport.get(0).setPointerCapture) {
slider.pointerId = orig.pointerId; slider.pointerId = orig.pointerId;
slider.viewport.get(0).setPointerCapture(slider.pointerId);
} }
// bind a "touchmove" event to the viewport // store original event data for click fixation
slider.viewport.bind('touchmove MSPointerMove pointermove', onTouchMove); slider.originalClickTarget = orig.originalTarget || orig.target;
// bind a "touchend" event to the viewport slider.originalClickButton = orig.button;
slider.viewport.bind('touchend MSPointerUp pointerup', onTouchEnd); slider.originalClickButtons = orig.buttons;
slider.viewport.bind('MSPointerCancel pointercancel', onPointerCancel); slider.originalEventType = orig.type;
// at this moment we don`t know what it is click or swipe
slider.hasMove = false;
// on a "touchmove" event to the viewport
slider.viewport.on('touchmove MSPointerMove pointermove', onTouchMove);
// on a "touchend" event to the viewport
slider.viewport.on('touchend MSPointerUp pointerup', onTouchEnd);
slider.viewport.on('MSPointerCancel pointercancel', onPointerCancel);
} }
}; };
@@ -1124,17 +1154,19 @@
* - DOM event object * - DOM event object
*/ */
var onPointerCancel = function(e) { var onPointerCancel = function(e) {
e.preventDefault();
/* onPointerCancel handler is needed to deal with situations when a touchend /* onPointerCancel handler is needed to deal with situations when a touchend
doesn't fire after a touchstart (this happens on windows phones only) */ doesn't fire after a touchstart (this happens on windows phones only) */
setPositionProperty(slider.touch.originalPos.left, 'reset', 0); setPositionProperty(slider.touch.originalPos.left, 'reset', 0);
//remove handlers //remove handlers
slider.controls.el.removeClass('disabled'); slider.controls.el.removeClass('disabled');
slider.viewport.unbind('MSPointerCancel pointercancel', onPointerCancel); slider.viewport.off('MSPointerCancel pointercancel', onPointerCancel);
slider.viewport.unbind('touchmove MSPointerMove pointermove', onTouchMove); slider.viewport.off('touchmove MSPointerMove pointermove', onTouchMove);
slider.viewport.unbind('touchend MSPointerUp pointerup', onTouchEnd); slider.viewport.off('touchend MSPointerUp pointerup', onTouchEnd);
if (slider.viewport.get(0).releasePointerCapture) { if (slider.viewport.get(0).releasePointerCapture && slider.hasPointerCapture) {
slider.viewport.get(0).releasePointerCapture(slider.pointerId); slider.viewport.get(0).releasePointerCapture(slider.pointerId);
slider.hasPointerCapture = false;
} }
}; };
@@ -1152,6 +1184,17 @@
yMovement = Math.abs(touchPoints[0].pageY - slider.touch.start.y), yMovement = Math.abs(touchPoints[0].pageY - slider.touch.start.y),
value = 0, value = 0,
change = 0; change = 0;
// this is swipe
slider.hasMove = true;
var hasSwiped = false;
if ((xMovement > 5) || (yMovement > 5)) {
hasSwiped = true;
}
if (slider.viewport.get(0).setPointerCapture && !slider.hasPointerCapture && hasSwiped && (slider.pointerId === 1)) {
slider.viewport.get(0).setPointerCapture(slider.pointerId);
slider.hasPointerCapture = true;
}
// x axis swipe // x axis swipe
if ((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX) { if ((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX) {
@@ -1160,6 +1203,10 @@
} else if ((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY) { } else if ((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY) {
e.preventDefault(); e.preventDefault();
} }
if (e.type !== 'touchmove') {
e.preventDefault();
}
if (slider.settings.mode !== 'fade' && slider.settings.oneToOneTouch) { if (slider.settings.mode !== 'fade' && slider.settings.oneToOneTouch) {
// if horizontal, drag along x axis // if horizontal, drag along x axis
if (slider.settings.mode === 'horizontal') { if (slider.settings.mode === 'horizontal') {
@@ -1181,7 +1228,8 @@
* - DOM event object * - DOM event object
*/ */
var onTouchEnd = function(e) { var onTouchEnd = function(e) {
slider.viewport.unbind('touchmove MSPointerMove pointermove', onTouchMove); e.preventDefault();
slider.viewport.off('touchmove MSPointerMove pointermove', onTouchMove);
//enable slider controls as soon as user stops interacing with slides //enable slider controls as soon as user stops interacing with slides
slider.controls.el.removeClass('disabled'); slider.controls.el.removeClass('disabled');
var orig = e.originalEvent, var orig = e.originalEvent,
@@ -1230,10 +1278,24 @@
} }
} }
} }
slider.viewport.unbind('touchend MSPointerUp pointerup', onTouchEnd); slider.viewport.off('touchend MSPointerUp pointerup', onTouchEnd);
if (slider.viewport.get(0).releasePointerCapture) { if (slider.viewport.get(0).releasePointerCapture) {
slider.viewport.get(0).releasePointerCapture(slider.pointerId); slider.viewport.get(0).releasePointerCapture(slider.pointerId);
} }
// if slider had swipe with left mouse, touch contact and pen contact
if (slider.hasMove === false && (slider.originalClickButton === 0 || slider.originalEventType === 'touchstart')) {
// trigger click event (fix for Firefox59 and PointerEvent standard compatibility)
$(slider.originalClickTarget).trigger({
type: 'click',
button: slider.originalClickButton,
buttons: slider.originalClickButtons
});
}
if (slider.viewport.get(0).releasePointerCapture && slider.hasPointerCapture) {
slider.viewport.get(0).releasePointerCapture(slider.pointerId);
slider.hasPointerCapture = false;
}
}; };
/** /**
@@ -1427,9 +1489,8 @@
value = slider.settings.mode === 'horizontal' ? -(position.left - moveBy) : -position.top; value = slider.settings.mode === 'horizontal' ? -(position.left - moveBy) : -position.top;
// plugin values to be animated // plugin values to be animated
setPositionProperty(value, 'slide', slider.settings.speed); setPositionProperty(value, 'slide', slider.settings.speed);
} else {
slider.working = false;
} }
slider.working = false;
} }
if (slider.settings.ariaHidden) { applyAriaHiddenAttributes(slider.active.index * getMoveBy()); } if (slider.settings.ariaHidden) { applyAriaHiddenAttributes(slider.active.index * getMoveBy()); }
}; };
@@ -1440,6 +1501,7 @@
el.goToNextSlide = function() { el.goToNextSlide = function() {
// if infiniteLoop is false and last page is showing, disregard call // if infiniteLoop is false and last page is showing, disregard call
if (!slider.settings.infiniteLoop && slider.active.last) { return; } if (!slider.settings.infiniteLoop && slider.active.last) { return; }
if (slider.working === true){ return ;}
var pagerIndex = parseInt(slider.active.index) + 1; var pagerIndex = parseInt(slider.active.index) + 1;
el.goToSlide(pagerIndex, 'next'); el.goToSlide(pagerIndex, 'next');
}; };
@@ -1450,6 +1512,7 @@
el.goToPrevSlide = function() { el.goToPrevSlide = function() {
// if infiniteLoop is false and last page is showing, disregard call // if infiniteLoop is false and last page is showing, disregard call
if (!slider.settings.infiniteLoop && slider.active.index === 0) { return; } if (!slider.settings.infiniteLoop && slider.active.index === 0) { return; }
if (slider.working === true){ return ;}
var pagerIndex = parseInt(slider.active.index) - 1; var pagerIndex = parseInt(slider.active.index) - 1;
el.goToSlide(pagerIndex, 'prev'); el.goToSlide(pagerIndex, 'prev');
}; };
@@ -1471,6 +1534,8 @@
el.goToPrevSlide(); el.goToPrevSlide();
} }
}, slider.settings.pause); }, slider.settings.pause);
//allback for when the auto rotate status changes
slider.settings.onAutoChange.call(el, true);
// if auto controls are displayed and preventControlUpdate is not true // if auto controls are displayed and preventControlUpdate is not true
if (slider.settings.autoControls && preventControlUpdate !== true) { updateAutoControls('stop'); } if (slider.settings.autoControls && preventControlUpdate !== true) { updateAutoControls('stop'); }
}; };
@@ -1482,11 +1547,15 @@
* - if true, auto controls state will not be updated * - if true, auto controls state will not be updated
*/ */
el.stopAuto = function(preventControlUpdate) { el.stopAuto = function(preventControlUpdate) {
// if slider is auto paused, just clear that state
if (slider.autoPaused) slider.autoPaused = false;
// if no interval exists, disregard call // if no interval exists, disregard call
if (!slider.interval) { return; } if (!slider.interval) { return; }
// clear the interval // clear the interval
clearInterval(slider.interval); clearInterval(slider.interval);
slider.interval = null; slider.interval = null;
//allback for when the auto rotate status changes
slider.settings.onAutoChange.call(el, false);
// if auto controls are displayed and preventControlUpdate is not true // if auto controls are displayed and preventControlUpdate is not true
if (slider.settings.autoControls && preventControlUpdate !== true) { updateAutoControls('start'); } if (slider.settings.autoControls && preventControlUpdate !== true) { updateAutoControls('start'); }
}; };
@@ -1579,10 +1648,12 @@
$('.bx-caption', this).remove(); $('.bx-caption', this).remove();
if (slider.controls.autoEl) { slider.controls.autoEl.remove(); } if (slider.controls.autoEl) { slider.controls.autoEl.remove(); }
clearInterval(slider.interval); clearInterval(slider.interval);
if (slider.settings.responsive) { $(window).unbind('resize', resizeWindow); } if (slider.settings.responsive) { $(window).off('resize', resizeWindow); }
if (slider.settings.keyboardEnabled) { $(document).unbind('keydown', keyPress); } if (slider.settings.keyboardEnabled) { $(document).off('keydown', keyPress); }
//remove self reference in data //remove self reference in data
$(this).removeData('bxSlider'); $(this).removeData('bxSlider');
// remove global window handlers
$(window).off('blur', windowBlurHandler).off('focus', windowFocusHandler);
}; };
/** /**
File diff suppressed because one or more lines are too long