소스 검색

Add waitForTransition option to determine whether to prevent any actions while transitioning or not(#63).

NaotoshiFujita 5 년 전
부모
커밋
7d56740581
11개의 변경된 파일326개의 추가작업 그리고 79개의 파일을 삭제
  1. 105 24
      dist/js/splide.esm.js
  2. 105 24
      dist/js/splide.js
  3. 1 1
      dist/js/splide.min.js
  4. BIN
      dist/js/splide.min.js.gz
  5. 1 1
      package-lock.json
  6. 1 1
      package.json
  7. 26 12
      src/js/components/drag/index.js
  8. 67 8
      src/js/components/track/index.js
  9. 9 0
      src/js/constants/defaults.js
  10. 10 7
      src/js/splide.d.ts
  11. 1 1
      src/js/splide.js

+ 105 - 24
dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 2.4.2
+ * Version  : 2.4.3
  * License  : MIT
  * Copyright: 2020 Naotoshi Fujita
  */
@@ -1093,6 +1093,15 @@ var DEFAULTS = {
    */
   rewindSpeed: 0,
 
+  /**
+   * Whether to prevent any actions while a slider is transitioning.
+   * If false, navigation, drag and swipe work while the slider is running.
+   * Even so, it will be forced to wait for transition in some cases in the loop mode to shift a slider.
+   *
+   * @type {boolean}
+   */
+  waitForTransition: true,
+
   /**
    * Define slider max width.
    *
@@ -1697,7 +1706,7 @@ var splide_Splide = /*#__PURE__*/function () {
 
   _proto.go = function go(control, wait) {
     if (wait === void 0) {
-      wait = true;
+      wait = this.options.waitForTransition;
     }
 
     if (this.State.is(IDLE) || this.State.is(MOVING) && !wait) {
@@ -2781,6 +2790,8 @@ var floor = Math.floor;
 
 
 
+
+var abs = Math.abs;
 /**
  * The component for moving list in the track.
  *
@@ -2825,6 +2836,20 @@ var floor = Math.floor;
    */
 
   var isFade = Splide.is(FADE);
+  /**
+   * This will be true while transitioning from the last index to the first one.
+   *
+   * @type {boolean}
+   */
+
+  var isLoopPending = false;
+  /**
+   * Sign for the direction. Only RTL mode uses the positive sign.
+   *
+   * @type {number}
+   */
+
+  var sign = Splide.options.direction === RTL ? 1 : -1;
   /**
    * Track component object.
    *
@@ -2833,11 +2858,11 @@ var floor = Math.floor;
 
   var Track = {
     /**
-     * Sign for the direction. Only RTL mode uses the positive sign.
+     * Make public the sign defined locally.
      *
      * @type {number}
      */
-    sign: Splide.options.direction === RTL ? 1 : -1,
+    sign: sign,
 
     /**
      * Called when the component is mounted.
@@ -2874,7 +2899,13 @@ var floor = Math.floor;
      */
     go: function go(destIndex, newIndex, silently) {
       var newPosition = getTrimmedPosition(destIndex);
-      var prevIndex = Splide.index;
+      var prevIndex = Splide.index; // Prevent any actions while transitioning from the last index to the first one for jump.
+
+      if (Splide.State.is(MOVING) && isLoopPending) {
+        return;
+      }
+
+      isLoopPending = destIndex !== newIndex;
 
       if (!silently) {
         Splide.emit('move', newIndex, prevIndex, destIndex);
@@ -2903,7 +2934,7 @@ var floor = Math.floor;
     },
 
     /**
-     * Set position.
+     * Set the list position by CSS translate property.
      *
      * @param {number} position - A new position value.
      */
@@ -2913,6 +2944,41 @@ var floor = Math.floor;
       });
     },
 
+    /**
+     * Cancel the transition and set the list position.
+     * Also, loop the slider if necessary.
+     */
+    cancel: function cancel() {
+      if (Splide.is(LOOP)) {
+        this.shift();
+      } else {
+        // Ensure the current position.
+        this.translate(this.position);
+      }
+
+      applyStyle(list, {
+        transition: ''
+      });
+    },
+
+    /**
+     * Shift the slider if it exceeds borders on the edge.
+     */
+    shift: function shift() {
+      var position = abs(this.position);
+      var left = abs(this.toPosition(0));
+      var right = abs(this.toPosition(Splide.length));
+      var innerSize = right - left;
+
+      if (position < left) {
+        position += innerSize;
+      } else if (position > right) {
+        position -= innerSize;
+      }
+
+      this.translate(sign * position);
+    },
+
     /**
      * Trim redundant spaces on the left or right edge if necessary.
      *
@@ -2925,7 +2991,7 @@ var floor = Math.floor;
         return position;
       }
 
-      var edge = this.sign * (Layout.totalSize() - Layout.size - Layout.gap);
+      var edge = sign * (Layout.totalSize() - Layout.size - Layout.gap);
       return between(position, edge, 0);
     },
 
@@ -2943,7 +3009,7 @@ var floor = Math.floor;
       var minDistance = Infinity;
       Elements.getSlides(true).forEach(function (Slide) {
         var slideIndex = Slide.index;
-        var distance = Math.abs(_this2.toPosition(slideIndex) - position);
+        var distance = abs(_this2.toPosition(slideIndex) - position);
 
         if (distance < minDistance) {
           minDistance = distance;
@@ -2976,11 +3042,11 @@ var floor = Math.floor;
      */
     toPosition: function toPosition(index) {
       var position = Layout.totalSize(index) - Layout.slideSize(index) - Layout.gap;
-      return this.sign * (position + this.offset(index));
+      return sign * (position + this.offset(index));
     },
 
     /**
-     * Return current offset value, considering direction.
+     * Return the current offset value, considering direction.
      *
      * @return {number} - Offset amount.
      */
@@ -3020,6 +3086,7 @@ var floor = Math.floor;
     applyStyle(list, {
       transition: ''
     });
+    isLoopPending = false;
 
     if (!isFade) {
       Track.jump(newIndex);
@@ -3745,7 +3812,7 @@ function createInterval(callback, interval, progress) {
 
 
 
-var abs = Math.abs;
+var drag_abs = Math.abs;
 /**
  * If the absolute velocity is greater thant this value,
  * a slider always goes to a different slide after drag, not allowed to stay on a current slide.
@@ -3870,12 +3937,23 @@ var FRICTION_REDUCER = 7;
    */
 
   function start(e) {
-    if (!Drag.disabled && !isDragging && Splide.State.is(IDLE)) {
-      startCoord = Track.toCoord(Track.position);
-      startInfo = analyze(e, {});
-      currentInfo = startInfo;
+    if (!Drag.disabled && !isDragging) {
+      // These prams are used to evaluate whether the slider should start moving.
+      init(e);
     }
   }
+  /**
+   * Initialize parameters.
+   *
+   * @param {TouchEvent|MouseEvent} e - TouchEvent or MouseEvent object.
+   */
+
+
+  function init(e) {
+    startCoord = Track.toCoord(Track.position);
+    startInfo = analyze(e, {});
+    currentInfo = startInfo;
+  }
   /**
    * Called while the track being dragged.
    *
@@ -3900,6 +3978,9 @@ var FRICTION_REDUCER = 7;
         if (shouldMove(currentInfo)) {
           Splide.emit('drag', startInfo);
           isDragging = true;
+          Track.cancel(); // These params are actual drag data.
+
+          init(e);
         }
       }
     }
@@ -3916,17 +3997,17 @@ var FRICTION_REDUCER = 7;
   function shouldMove(_ref) {
     var offset = _ref.offset;
 
-    if (Splide.State.is(IDLE)) {
-      var angle = Math.atan(abs(offset.y) / abs(offset.x)) * 180 / Math.PI;
+    if (Splide.State.is(MOVING) && Splide.options.waitForTransition) {
+      return false;
+    }
 
-      if (isVertical) {
-        angle = 90 - angle;
-      }
+    var angle = Math.atan(drag_abs(offset.y) / drag_abs(offset.x)) * 180 / Math.PI;
 
-      return angle < Splide.options.dragAngleThreshold;
+    if (isVertical) {
+      angle = 90 - angle;
     }
 
-    return false;
+    return angle < Splide.options.dragAngleThreshold;
   }
   /**
    * Resist dragging the track on the first/last page because there is no more.
@@ -3981,7 +4062,7 @@ var FRICTION_REDUCER = 7;
 
   function go(info) {
     var velocity = info.velocity[axis];
-    var absV = abs(velocity);
+    var absV = drag_abs(velocity);
 
     if (absV > 0) {
       var options = Splide.options;
@@ -3992,7 +4073,7 @@ var FRICTION_REDUCER = 7;
       if (!Splide.is(FADE)) {
         var destination = Track.position;
 
-        if (absV > options.flickVelocityThreshold && abs(info.offset[axis]) < options.swipeDistanceThreshold) {
+        if (absV > options.flickVelocityThreshold && drag_abs(info.offset[axis]) < options.swipeDistanceThreshold) {
           destination += sign * Math.min(absV * options.flickPower, Components.Layout.size * (options.flickMaxPages || 1));
         }
 

+ 105 - 24
dist/js/splide.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 2.4.2
+ * Version  : 2.4.3
  * License  : MIT
  * Copyright: 2020 Naotoshi Fujita
  */
@@ -1083,6 +1083,15 @@ var DEFAULTS = {
    */
   rewindSpeed: 0,
 
+  /**
+   * Whether to prevent any actions while a slider is transitioning.
+   * If false, navigation, drag and swipe work while the slider is running.
+   * Even so, it will be forced to wait for transition in some cases in the loop mode to shift a slider.
+   *
+   * @type {boolean}
+   */
+  waitForTransition: true,
+
   /**
    * Define slider max width.
    *
@@ -1687,7 +1696,7 @@ var splide_Splide = /*#__PURE__*/function () {
 
   _proto.go = function go(control, wait) {
     if (wait === void 0) {
-      wait = true;
+      wait = this.options.waitForTransition;
     }
 
     if (this.State.is(IDLE) || this.State.is(MOVING) && !wait) {
@@ -2771,6 +2780,8 @@ var floor = Math.floor;
 
 
 
+
+var abs = Math.abs;
 /**
  * The component for moving list in the track.
  *
@@ -2815,6 +2826,20 @@ var floor = Math.floor;
    */
 
   var isFade = Splide.is(FADE);
+  /**
+   * This will be true while transitioning from the last index to the first one.
+   *
+   * @type {boolean}
+   */
+
+  var isLoopPending = false;
+  /**
+   * Sign for the direction. Only RTL mode uses the positive sign.
+   *
+   * @type {number}
+   */
+
+  var sign = Splide.options.direction === RTL ? 1 : -1;
   /**
    * Track component object.
    *
@@ -2823,11 +2848,11 @@ var floor = Math.floor;
 
   var Track = {
     /**
-     * Sign for the direction. Only RTL mode uses the positive sign.
+     * Make public the sign defined locally.
      *
      * @type {number}
      */
-    sign: Splide.options.direction === RTL ? 1 : -1,
+    sign: sign,
 
     /**
      * Called when the component is mounted.
@@ -2864,7 +2889,13 @@ var floor = Math.floor;
      */
     go: function go(destIndex, newIndex, silently) {
       var newPosition = getTrimmedPosition(destIndex);
-      var prevIndex = Splide.index;
+      var prevIndex = Splide.index; // Prevent any actions while transitioning from the last index to the first one for jump.
+
+      if (Splide.State.is(MOVING) && isLoopPending) {
+        return;
+      }
+
+      isLoopPending = destIndex !== newIndex;
 
       if (!silently) {
         Splide.emit('move', newIndex, prevIndex, destIndex);
@@ -2893,7 +2924,7 @@ var floor = Math.floor;
     },
 
     /**
-     * Set position.
+     * Set the list position by CSS translate property.
      *
      * @param {number} position - A new position value.
      */
@@ -2903,6 +2934,41 @@ var floor = Math.floor;
       });
     },
 
+    /**
+     * Cancel the transition and set the list position.
+     * Also, loop the slider if necessary.
+     */
+    cancel: function cancel() {
+      if (Splide.is(LOOP)) {
+        this.shift();
+      } else {
+        // Ensure the current position.
+        this.translate(this.position);
+      }
+
+      applyStyle(list, {
+        transition: ''
+      });
+    },
+
+    /**
+     * Shift the slider if it exceeds borders on the edge.
+     */
+    shift: function shift() {
+      var position = abs(this.position);
+      var left = abs(this.toPosition(0));
+      var right = abs(this.toPosition(Splide.length));
+      var innerSize = right - left;
+
+      if (position < left) {
+        position += innerSize;
+      } else if (position > right) {
+        position -= innerSize;
+      }
+
+      this.translate(sign * position);
+    },
+
     /**
      * Trim redundant spaces on the left or right edge if necessary.
      *
@@ -2915,7 +2981,7 @@ var floor = Math.floor;
         return position;
       }
 
-      var edge = this.sign * (Layout.totalSize() - Layout.size - Layout.gap);
+      var edge = sign * (Layout.totalSize() - Layout.size - Layout.gap);
       return between(position, edge, 0);
     },
 
@@ -2933,7 +2999,7 @@ var floor = Math.floor;
       var minDistance = Infinity;
       Elements.getSlides(true).forEach(function (Slide) {
         var slideIndex = Slide.index;
-        var distance = Math.abs(_this2.toPosition(slideIndex) - position);
+        var distance = abs(_this2.toPosition(slideIndex) - position);
 
         if (distance < minDistance) {
           minDistance = distance;
@@ -2966,11 +3032,11 @@ var floor = Math.floor;
      */
     toPosition: function toPosition(index) {
       var position = Layout.totalSize(index) - Layout.slideSize(index) - Layout.gap;
-      return this.sign * (position + this.offset(index));
+      return sign * (position + this.offset(index));
     },
 
     /**
-     * Return current offset value, considering direction.
+     * Return the current offset value, considering direction.
      *
      * @return {number} - Offset amount.
      */
@@ -3010,6 +3076,7 @@ var floor = Math.floor;
     applyStyle(list, {
       transition: ''
     });
+    isLoopPending = false;
 
     if (!isFade) {
       Track.jump(newIndex);
@@ -3735,7 +3802,7 @@ function createInterval(callback, interval, progress) {
 
 
 
-var abs = Math.abs;
+var drag_abs = Math.abs;
 /**
  * If the absolute velocity is greater thant this value,
  * a slider always goes to a different slide after drag, not allowed to stay on a current slide.
@@ -3860,12 +3927,23 @@ var FRICTION_REDUCER = 7;
    */
 
   function start(e) {
-    if (!Drag.disabled && !isDragging && Splide.State.is(IDLE)) {
-      startCoord = Track.toCoord(Track.position);
-      startInfo = analyze(e, {});
-      currentInfo = startInfo;
+    if (!Drag.disabled && !isDragging) {
+      // These prams are used to evaluate whether the slider should start moving.
+      init(e);
     }
   }
+  /**
+   * Initialize parameters.
+   *
+   * @param {TouchEvent|MouseEvent} e - TouchEvent or MouseEvent object.
+   */
+
+
+  function init(e) {
+    startCoord = Track.toCoord(Track.position);
+    startInfo = analyze(e, {});
+    currentInfo = startInfo;
+  }
   /**
    * Called while the track being dragged.
    *
@@ -3890,6 +3968,9 @@ var FRICTION_REDUCER = 7;
         if (shouldMove(currentInfo)) {
           Splide.emit('drag', startInfo);
           isDragging = true;
+          Track.cancel(); // These params are actual drag data.
+
+          init(e);
         }
       }
     }
@@ -3906,17 +3987,17 @@ var FRICTION_REDUCER = 7;
   function shouldMove(_ref) {
     var offset = _ref.offset;
 
-    if (Splide.State.is(IDLE)) {
-      var angle = Math.atan(abs(offset.y) / abs(offset.x)) * 180 / Math.PI;
+    if (Splide.State.is(MOVING) && Splide.options.waitForTransition) {
+      return false;
+    }
 
-      if (isVertical) {
-        angle = 90 - angle;
-      }
+    var angle = Math.atan(drag_abs(offset.y) / drag_abs(offset.x)) * 180 / Math.PI;
 
-      return angle < Splide.options.dragAngleThreshold;
+    if (isVertical) {
+      angle = 90 - angle;
     }
 
-    return false;
+    return angle < Splide.options.dragAngleThreshold;
   }
   /**
    * Resist dragging the track on the first/last page because there is no more.
@@ -3971,7 +4052,7 @@ var FRICTION_REDUCER = 7;
 
   function go(info) {
     var velocity = info.velocity[axis];
-    var absV = abs(velocity);
+    var absV = drag_abs(velocity);
 
     if (absV > 0) {
       var options = Splide.options;
@@ -3982,7 +4063,7 @@ var FRICTION_REDUCER = 7;
       if (!Splide.is(FADE)) {
         var destination = Track.position;
 
-        if (absV > options.flickVelocityThreshold && abs(info.offset[axis]) < options.swipeDistanceThreshold) {
+        if (absV > options.flickVelocityThreshold && drag_abs(info.offset[axis]) < options.swipeDistanceThreshold) {
           destination += sign * Math.min(absV * options.flickPower, Components.Layout.size * (options.flickMaxPages || 1));
         }
 

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 1 - 1
dist/js/splide.min.js


BIN
dist/js/splide.min.js.gz


+ 1 - 1
package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "description": "Splide is a lightweight and powerful slider without any dependencies.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

+ 26 - 12
src/js/components/drag/index.js

@@ -7,7 +7,7 @@
 
 import { FADE, SLIDE } from '../../constants/types';
 import { TTB } from '../../constants/directions';
-import { IDLE } from '../../constants/states';
+import { MOVING } from '../../constants/states';
 import { between } from '../../utils/utils';
 import { each } from "../../utils/object";
 
@@ -137,13 +137,23 @@ export default ( Splide, Components ) => {
 	 * @param {TouchEvent|MouseEvent} e - TouchEvent or MouseEvent object.
 	 */
 	function start( e ) {
-		if ( ! Drag.disabled && ! isDragging && Splide.State.is( IDLE ) ) {
-			startCoord  = Track.toCoord( Track.position );
-			startInfo   = analyze( e, {} );
-			currentInfo = startInfo;
+		if ( ! Drag.disabled && ! isDragging ) {
+			// These prams are used to evaluate whether the slider should start moving.
+			init( e );
 		}
 	}
 
+	/**
+	 * Initialize parameters.
+	 *
+	 * @param {TouchEvent|MouseEvent} e - TouchEvent or MouseEvent object.
+	 */
+	function init( e ) {
+		startCoord  = Track.toCoord( Track.position );
+		startInfo   = analyze( e, {} );
+		currentInfo = startInfo;
+	}
+
 	/**
 	 * Called while the track being dragged.
 	 *
@@ -166,6 +176,10 @@ export default ( Splide, Components ) => {
 				if ( shouldMove( currentInfo ) ) {
 					Splide.emit( 'drag', startInfo );
 					isDragging = true;
+					Track.cancel();
+
+					// These params are actual drag data.
+					init( e );
 				}
 			}
 		}
@@ -179,17 +193,17 @@ export default ( Splide, Components ) => {
 	 * @return {boolean} - True if the track should be moved or false if not.
 	 */
 	function shouldMove( { offset } ) {
-		if ( Splide.State.is( IDLE ) ) {
-			let angle = Math.atan( abs( offset.y ) / abs( offset.x ) ) * 180 / Math.PI;
+		if ( Splide.State.is( MOVING ) && Splide.options.waitForTransition ) {
+			return false;
+		}
 
-			if ( isVertical ) {
-				angle = 90 - angle;
-			}
+		let angle = Math.atan( abs( offset.y ) / abs( offset.x ) ) * 180 / Math.PI;
 
-			return angle < Splide.options.dragAngleThreshold;
+		if ( isVertical ) {
+			angle = 90 - angle;
 		}
 
-		return false;
+		return angle < Splide.options.dragAngleThreshold;
 	}
 
 	/**

+ 67 - 8
src/js/components/track/index.js

@@ -6,9 +6,12 @@
  */
 
 import { applyStyle, getRect } from '../../utils/dom';
+import { between } from "../../utils/utils";
 import { LOOP, FADE } from '../../constants/types';
 import { RTL, TTB } from '../../constants/directions';
-import { between } from "../../utils/utils";
+import { MOVING } from "../../constants/states";
+
+const { abs } = Math;
 
 
 /**
@@ -55,6 +58,20 @@ export default ( Splide, Components ) => {
 	 */
 	const isFade = Splide.is( FADE );
 
+	/**
+	 * This will be true while transitioning from the last index to the first one.
+	 *
+	 * @type {boolean}
+	 */
+	let isLoopPending = false;
+
+	/**
+	 * Sign for the direction. Only RTL mode uses the positive sign.
+	 *
+	 * @type {number}
+	 */
+	const sign = Splide.options.direction === RTL ? 1 : -1;
+
 	/**
 	 * Track component object.
 	 *
@@ -62,11 +79,11 @@ export default ( Splide, Components ) => {
 	 */
 	const Track = {
 		/**
-		 * Sign for the direction. Only RTL mode uses the positive sign.
+		 * Make public the sign defined locally.
 		 *
 		 * @type {number}
 		 */
-		sign: Splide.options.direction === RTL ? 1 : -1,
+		sign,
 
 		/**
 		 * Called when the component is mounted.
@@ -101,6 +118,13 @@ export default ( Splide, Components ) => {
 			const newPosition = getTrimmedPosition( destIndex );
 			const prevIndex   = Splide.index;
 
+		  // Prevent any actions while transitioning from the last index to the first one for jump.
+			if ( Splide.State.is( MOVING ) && isLoopPending ) {
+				return;
+			}
+
+			isLoopPending = destIndex !== newIndex;
+
 			if ( ! silently ) {
 				Splide.emit( 'move', newIndex, prevIndex, destIndex );
 			}
@@ -128,7 +152,7 @@ export default ( Splide, Components ) => {
 		},
 
 		/**
-		 * Set position.
+		 * Set the list position by CSS translate property.
 		 *
 		 * @param {number} position - A new position value.
 		 */
@@ -136,6 +160,40 @@ export default ( Splide, Components ) => {
 			applyStyle( list, { transform: `translate${ isVertical ? 'Y' : 'X' }(${ position }px)` } );
 		},
 
+		/**
+		 * Cancel the transition and set the list position.
+		 * Also, loop the slider if necessary.
+		 */
+		cancel() {
+			if ( Splide.is( LOOP ) ) {
+				this.shift();
+			} else {
+				// Ensure the current position.
+				this.translate( this.position );
+			}
+
+			applyStyle( list, { transition: '' } );
+		},
+
+		/**
+		 * Shift the slider if it exceeds borders on the edge.
+		 */
+		shift() {
+			let position = abs( this.position );
+
+			const left      = abs( this.toPosition( 0 ) );
+			const right     = abs( this.toPosition( Splide.length ) );
+			const innerSize = right - left;
+
+			if ( position < left ) {
+				position += innerSize;
+			} else if ( position > right ) {
+				position -= innerSize;
+			}
+
+			this.translate( sign * position );
+		},
+
 		/**
 		 * Trim redundant spaces on the left or right edge if necessary.
 		 *
@@ -148,7 +206,7 @@ export default ( Splide, Components ) => {
 				return position;
 			}
 
-			const edge = this.sign * ( Layout.totalSize() - Layout.size - Layout.gap );
+			const edge = sign * ( Layout.totalSize() - Layout.size - Layout.gap );
 			return between( position, edge, 0 );
 		},
 
@@ -165,7 +223,7 @@ export default ( Splide, Components ) => {
 
 			Elements.getSlides( true ).forEach( Slide => {
 				const slideIndex = Slide.index;
-				const distance   = Math.abs( this.toPosition( slideIndex ) - position );
+				const distance   = abs( this.toPosition( slideIndex ) - position );
 
 				if ( distance < minDistance ) {
 					minDistance = distance;
@@ -199,11 +257,11 @@ export default ( Splide, Components ) => {
 		 */
 		toPosition( index ) {
 			const position = Layout.totalSize( index ) - Layout.slideSize( index ) - Layout.gap;
-			return this.sign * ( position + this.offset( index ) );
+			return sign * ( position + this.offset( index ) );
 		},
 
 		/**
-		 * Return current offset value, considering direction.
+		 * Return the current offset value, considering direction.
 		 *
 		 * @return {number} - Offset amount.
 		 */
@@ -240,6 +298,7 @@ export default ( Splide, Components ) => {
 	 */
 	function onTransitionEnd( destIndex, newIndex, prevIndex, silently ) {
 		applyStyle( list, { transition: '' } );
+		isLoopPending = false;
 
 		if ( ! isFade ) {
 			Track.jump( newIndex );

+ 9 - 0
src/js/constants/defaults.js

@@ -42,6 +42,15 @@ export const DEFAULTS = {
 	 */
 	rewindSpeed: 0,
 
+	/**
+	 * Whether to prevent any actions while a slider is transitioning.
+	 * If false, navigation, drag and swipe work while the slider is running.
+	 * Even so, it will be forced to wait for transition in some cases in the loop mode to shift a slider.
+	 *
+	 * @type {boolean}
+	 */
+	waitForTransition: true,
+
 	/**
 	 * Define slider max width.
 	 *

+ 10 - 7
src/js/splide.d.ts

@@ -134,6 +134,11 @@ export interface SplideOptions extends BreakpointOptions {
 	 */
 	rewindSpeed?: number;
 
+	/**
+	 * @default false
+	 */
+	waitForTransition?: boolean,
+
 	/**
 	 * @default false
 	 */
@@ -590,21 +595,19 @@ export interface Sync extends Component {}
  * Track component.
  */
 export interface Track extends Component {
-	axis: 'X' | 'Y';
-	sign: 1 | -1;
-
+	readonly sign: 1 | -1;
 	readonly position: number;
 
-	init(): void;
-
 	go( destIndex: number, newIndex: number, silently: boolean ): void;
 	jump( index: number ): void;
 	translate( position: number ): void;
+	cancel(): void;
+	shift(): void;
 	trim( position: number ): number;
+	toIndex( index: number ): number;
 	toCoord( position: number ): Coordinates;
 	toPosition( index: number ): number;
-	toIndex( index: number ): number;
-	offset(): number;
+	offset( index: number ): number;
 }
 
 /**

+ 1 - 1
src/js/splide.js

@@ -152,7 +152,7 @@ export default class Splide {
 	 * @param {string|number} control - A control pattern.
 	 * @param {boolean}       wait    - Optional. Whether to wait for transition.
 	 */
-	go( control, wait = true ) {
+	go( control, wait = this.options.waitForTransition ) {
 		if ( this.State.is( STATES.IDLE ) || ( this.State.is( STATES.MOVING ) && ! wait ) ) {
 			this.Components.Controller.go( control, false );
 		}

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.