mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-16 10:04:45 +02:00
@@ -21,13 +21,23 @@ const PLUGINS = {
|
||||
export default class WebSlides {
|
||||
/**
|
||||
* Options for WebSlides
|
||||
* @param {number|boolean} autoslide Is false by default. If a number is
|
||||
* @param {boolean} changeOnClick Is false by default. If true, it will allow
|
||||
* @param {number|boolean} autoslide If a number is provided, it will allow
|
||||
* autosliding by said amount of miliseconds.
|
||||
* @param {boolean} changeOnClick If true, it will allow
|
||||
* clicking on any place to change the slide.
|
||||
* @param {number} minWheelDelta Controls the amount of needed scroll to
|
||||
* trigger navigation.
|
||||
* @param {number} scrollWait Controls the amount of time to wait till
|
||||
* navigation can occur again with scroll.
|
||||
* @param {number} slideOffset Controls the amount of needed touch delta to
|
||||
* trigger navigation.
|
||||
*/
|
||||
constructor({
|
||||
autoslide = false,
|
||||
changeOnClick = false
|
||||
changeOnClick = false,
|
||||
minWheelDelta = 40,
|
||||
scrollWait = 450,
|
||||
slideOffset = 50
|
||||
} = {}) {
|
||||
/**
|
||||
* WebSlide element.
|
||||
@@ -79,18 +89,16 @@ export default class WebSlides {
|
||||
*/
|
||||
this.interval_ = null;
|
||||
/**
|
||||
* Amount of time to wait to go to next slide automatically or false to
|
||||
* disable the feature.
|
||||
* @type {boolean|number}
|
||||
* @private
|
||||
* Options dictionary.
|
||||
* @type {Object}
|
||||
*/
|
||||
this.autoslide_ = autoslide;
|
||||
/**
|
||||
* Whether navigation should initiate on click or not.
|
||||
* @type {boolean}
|
||||
* @private
|
||||
*/
|
||||
this.changeOnClick_ = changeOnClick;
|
||||
this.options = {
|
||||
autoslide,
|
||||
changeOnClick,
|
||||
minWheelDelta,
|
||||
scrollWait,
|
||||
slideOffset
|
||||
};
|
||||
|
||||
if (!this.el) {
|
||||
throw new Error('Couldn\'t find the webslides container!');
|
||||
@@ -164,7 +172,9 @@ export default class WebSlides {
|
||||
* scroll animations.
|
||||
*/
|
||||
goToSlide(slideI, forward = null) {
|
||||
if (this.isValidIndexSlide_(slideI) && !this.isMoving) {
|
||||
if (this.isValidIndexSlide_(slideI) &&
|
||||
!this.isMoving &&
|
||||
this.currentSlideI_ !== slideI) {
|
||||
this.isMoving = true;
|
||||
let isMovingForward = false;
|
||||
|
||||
@@ -352,7 +362,7 @@ export default class WebSlides {
|
||||
* automatically.
|
||||
*/
|
||||
play(time) {
|
||||
time = time || this.autoslide_;
|
||||
time = time || this.options.autoslide;
|
||||
|
||||
if (!this.interval_ && typeof time === 'number' && time > 0) {
|
||||
this.interval_ = setInterval(this.goNext.bind(this), time);
|
||||
|
@@ -19,7 +19,7 @@ export default class ClickNav {
|
||||
*/
|
||||
this.ws_ = wsInstance;
|
||||
|
||||
if (wsInstance.changeOnClick_) {
|
||||
if (wsInstance.options.changeOnClick) {
|
||||
this.ws_.el.addEventListener('click', this.onClick_.bind(this));
|
||||
}
|
||||
}
|
||||
|
@@ -1,7 +1,5 @@
|
||||
import MobileDetector from '../utils/mobile-detector';
|
||||
|
||||
const MIN_WHEEL_DELTA = 40;
|
||||
|
||||
export default class Scroll {
|
||||
/**
|
||||
* Scroll handler for the WebSlides.
|
||||
@@ -55,7 +53,9 @@ export default class Scroll {
|
||||
* @private
|
||||
*/
|
||||
onSlideChange_() {
|
||||
this.timeout_ = setTimeout(() => { this.timeout_ = null; }, 450);
|
||||
this.timeout_ = setTimeout(
|
||||
() => { this.timeout_ = null; },
|
||||
this.ws_.options.scrollWait);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -88,8 +88,8 @@ export default class Scroll {
|
||||
}
|
||||
}
|
||||
|
||||
if (Math.abs(wheelDeltaY) >= MIN_WHEEL_DELTA ||
|
||||
Math.abs(wheelDeltaX) >= MIN_WHEEL_DELTA) {
|
||||
if (Math.abs(wheelDeltaY) >= this.ws_.options.minWheelDelta ||
|
||||
Math.abs(wheelDeltaX) >= this.ws_.options.minWheelDelta) {
|
||||
if ((isHorizontalMovement && this.isGoingLeft_) ||
|
||||
(!isHorizontalMovement && this.isGoingUp_)) {
|
||||
this.ws_.goPrev();
|
||||
|
@@ -13,8 +13,6 @@ const EVENTS = {
|
||||
}
|
||||
};
|
||||
|
||||
const SLIDE_OFFSET = 50;
|
||||
|
||||
export default class Touch {
|
||||
/**
|
||||
* @param {WebSlides} wsInstance The WebSlides instance
|
||||
@@ -116,9 +114,9 @@ export default class Touch {
|
||||
|
||||
// It's an horizontal drag
|
||||
if (Math.abs(diffX) > Math.abs(diffY)) {
|
||||
if(diffX < -SLIDE_OFFSET) {
|
||||
if (diffX < -this.ws_.options.slideOffset) {
|
||||
this.ws_.goPrev();
|
||||
} else if(diffX > SLIDE_OFFSET) {
|
||||
} else if(diffX > this.ws_.options.slideOffset) {
|
||||
this.ws_.goNext();
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user