Bug Fix: `cancelable` seems not to become `true` without any listeners and actions.

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.0.3
+ * Version  : 3.0.4
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -411,10 +411,10 @@ function EventInterface(Splide2) {
       target.addEventListener(event2, callback, options);
     });
   }
-  function unbind(targets, events) {
+  function unbind(targets, events, callback) {
     forEachEvent(targets, events, (target, event2) => {
       listeners = listeners.filter((listener) => {
-        if (listener[0] === target && listener[1] === event2) {
+        if (listener[0] === target && listener[1] === event2 && (!callback || listener[2] === callback)) {
           target.removeEventListener(event2, listener[2], listener[3]);
           return false;
         }
@@ -1243,8 +1243,8 @@ function Move(Splide2, Components2, options) {
   }
   function cancel() {
     waiting = false;
-    Components2.Transition.cancel();
     translate(getPosition());
+    Components2.Transition.cancel();
   }
   function toIndex(position) {
     const Slides = Components2.Slides.get();
@@ -1726,10 +1726,10 @@ const POINTER_UP_EVENTS = "touchend touchcancel mouseup mouseleave";
 function Drag(Splide2, Components2, options) {
   const { on, emit, bind, unbind } = EventInterface(Splide2);
   const { Move, Scroll, Controller } = Components2;
-  const { ruleBy } = Components2.Style;
   const { track } = Components2.Elements;
   const { resolve, orient } = Components2.Direction;
   const { getPosition, exceededLimit } = Move;
+  const listenerOptions = { capture: true, passive: false };
   const isSlide = Splide2.is(SLIDE);
   const isFade = Splide2.is(FADE);
   let basePosition;
@@ -1738,13 +1738,14 @@ function Drag(Splide2, Components2, options) {
   let lastEvent;
   let isFree;
   let isDragging;
-  let isMouse;
   let hasExceeded = false;
   let clickPrevented;
   let disabled;
   let target;
   function mount() {
-    bind(track, POINTER_DOWN_EVENTS, onPointerDown, { passive: false, capture: true });
+    bind(track, POINTER_MOVE_EVENTS, noop);
+    bind(track, POINTER_UP_EVENTS, noop);
+    bind(track, POINTER_DOWN_EVENTS, onPointerDown, listenerOptions);
     bind(track, "click", onClick, { capture: true });
     on([EVENT_MOUNTED, EVENT_UPDATED], init);
   }
@@ -1755,18 +1756,17 @@ function Drag(Splide2, Components2, options) {
   }
   function onPointerDown(e) {
     if (!disabled) {
-      isMouse = e.type === "mousedown";
-      if (!isMouse || !e.button) {
+      const isTouch = isTouchEvent(e);
+      if (isTouch || !e.button) {
         if (!Move.isBusy()) {
-          target = isMouse ? window : track;
+          target = isTouch ? track : window;
           prevBaseEvent = null;
           lastEvent = null;
           clickPrevented = false;
-          bind(target, POINTER_MOVE_EVENTS, onPointerMove);
-          bind(target, POINTER_UP_EVENTS, onPointerUp);
+          bind(target, POINTER_MOVE_EVENTS, onPointerMove, listenerOptions);
+          bind(target, POINTER_UP_EVENTS, onPointerUp, listenerOptions);
           Move.cancel();
           Scroll.cancel();
-          ruleBy(track, "will-change", "transform");
           save(e);
         } else {
           prevent(e, true);
@@ -1793,8 +1793,8 @@ function Drag(Splide2, Components2, options) {
         emit(EVENT_DRAGGING);
         prevent(e);
       } else {
-        const threshold = options.dragMinThreshold || 15;
-        isDragging = isMouse || abs(coordOf(e) - coordOf(baseEvent)) > threshold;
+        const threshold = options.dragMinThreshold || 5;
+        isDragging = !isTouchEvent(e) || abs(coordOf(e) - coordOf(baseEvent)) > threshold;
         if (isSliderDirection()) {
           prevent(e);
         }
@@ -1802,8 +1802,8 @@ function Drag(Splide2, Components2, options) {
     }
   }
   function onPointerUp(e) {
-    unbind(target, `${POINTER_MOVE_EVENTS} ${POINTER_UP_EVENTS}`);
-    ruleBy(track, "will-change", "");
+    unbind(target, POINTER_MOVE_EVENTS, onPointerMove);
+    unbind(target, POINTER_UP_EVENTS, onPointerUp);
     if (lastEvent) {
       if (isDragging || e.cancelable && isSliderDirection()) {
         const velocity = computeVelocity(e);
@@ -1856,8 +1856,10 @@ function Drag(Splide2, Components2, options) {
     return isSlide ? clamp(dest, 0, Controller.getEnd()) : dest;
   }
   function coordOf(e, orthogonal) {
-    const prop = `page${resolve(orthogonal ? "Y" : "X")}`;
-    return (isMouse ? e : e.touches[0])[prop];
+    return (isTouchEvent(e) ? e.touches[0] : e)[`page${resolve(orthogonal ? "Y" : "X")}`];
+  }
+  function isTouchEvent(e) {
+    return typeof TouchEvent !== "undefined" && e instanceof TouchEvent;
   }
   function timeOf(e) {
     return e.timeStamp;

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.0.3
+ * Version  : 3.0.4
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -407,10 +407,10 @@ function EventInterface(Splide2) {
       target.addEventListener(event2, callback, options);
     });
   }
-  function unbind(targets, events) {
+  function unbind(targets, events, callback) {
     forEachEvent(targets, events, (target, event2) => {
       listeners = listeners.filter((listener) => {
-        if (listener[0] === target && listener[1] === event2) {
+        if (listener[0] === target && listener[1] === event2 && (!callback || listener[2] === callback)) {
           target.removeEventListener(event2, listener[2], listener[3]);
           return false;
         }
@@ -1239,8 +1239,8 @@ function Move(Splide2, Components2, options) {
   }
   function cancel() {
     waiting = false;
-    Components2.Transition.cancel();
     translate(getPosition());
+    Components2.Transition.cancel();
   }
   function toIndex(position) {
     const Slides = Components2.Slides.get();
@@ -1722,10 +1722,10 @@ const POINTER_UP_EVENTS = "touchend touchcancel mouseup mouseleave";
 function Drag(Splide2, Components2, options) {
   const { on, emit, bind, unbind } = EventInterface(Splide2);
   const { Move, Scroll, Controller } = Components2;
-  const { ruleBy } = Components2.Style;
   const { track } = Components2.Elements;
   const { resolve, orient } = Components2.Direction;
   const { getPosition, exceededLimit } = Move;
+  const listenerOptions = { capture: true, passive: false };
   const isSlide = Splide2.is(SLIDE);
   const isFade = Splide2.is(FADE);
   let basePosition;
@@ -1734,13 +1734,14 @@ function Drag(Splide2, Components2, options) {
   let lastEvent;
   let isFree;
   let isDragging;
-  let isMouse;
   let hasExceeded = false;
   let clickPrevented;
   let disabled;
   let target;
   function mount() {
-    bind(track, POINTER_DOWN_EVENTS, onPointerDown, { passive: false, capture: true });
+    bind(track, POINTER_MOVE_EVENTS, noop);
+    bind(track, POINTER_UP_EVENTS, noop);
+    bind(track, POINTER_DOWN_EVENTS, onPointerDown, listenerOptions);
     bind(track, "click", onClick, { capture: true });
     on([EVENT_MOUNTED, EVENT_UPDATED], init);
   }
@@ -1751,18 +1752,17 @@ function Drag(Splide2, Components2, options) {
   }
   function onPointerDown(e) {
     if (!disabled) {
-      isMouse = e.type === "mousedown";
-      if (!isMouse || !e.button) {
+      const isTouch = isTouchEvent(e);
+      if (isTouch || !e.button) {
         if (!Move.isBusy()) {
-          target = isMouse ? window : track;
+          target = isTouch ? track : window;
           prevBaseEvent = null;
           lastEvent = null;
           clickPrevented = false;
-          bind(target, POINTER_MOVE_EVENTS, onPointerMove);
-          bind(target, POINTER_UP_EVENTS, onPointerUp);
+          bind(target, POINTER_MOVE_EVENTS, onPointerMove, listenerOptions);
+          bind(target, POINTER_UP_EVENTS, onPointerUp, listenerOptions);
           Move.cancel();
           Scroll.cancel();
-          ruleBy(track, "will-change", "transform");
           save(e);
         } else {
           prevent(e, true);
@@ -1789,8 +1789,8 @@ function Drag(Splide2, Components2, options) {
         emit(EVENT_DRAGGING);
         prevent(e);
       } else {
-        const threshold = options.dragMinThreshold || 15;
-        isDragging = isMouse || abs(coordOf(e) - coordOf(baseEvent)) > threshold;
+        const threshold = options.dragMinThreshold || 5;
+        isDragging = !isTouchEvent(e) || abs(coordOf(e) - coordOf(baseEvent)) > threshold;
         if (isSliderDirection()) {
           prevent(e);
         }
@@ -1798,8 +1798,8 @@ function Drag(Splide2, Components2, options) {
     }
   }
   function onPointerUp(e) {
-    unbind(target, `${POINTER_MOVE_EVENTS} ${POINTER_UP_EVENTS}`);
-    ruleBy(track, "will-change", "");
+    unbind(target, POINTER_MOVE_EVENTS, onPointerMove);
+    unbind(target, POINTER_UP_EVENTS, onPointerUp);
     if (lastEvent) {
       if (isDragging || e.cancelable && isSliderDirection()) {
         const velocity = computeVelocity(e);
@@ -1852,8 +1852,10 @@ function Drag(Splide2, Components2, options) {
     return isSlide ? clamp(dest, 0, Controller.getEnd()) : dest;
   }
   function coordOf(e, orthogonal) {
-    const prop = `page${resolve(orthogonal ? "Y" : "X")}`;
-    return (isMouse ? e : e.touches[0])[prop];
+    return (isTouchEvent(e) ? e.touches[0] : e)[`page${resolve(orthogonal ? "Y" : "X")}`];
+  }
+  function isTouchEvent(e) {
+    return typeof TouchEvent !== "undefined" && e instanceof TouchEvent;
   }
   function timeOf(e) {
     return e.timeStamp;

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 3.0.3
+ * Version  : 3.0.4
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -457,10 +457,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       });
     }
 
-    function unbind(targets, events) {
+    function unbind(targets, events, callback) {
       forEachEvent(targets, events, function (target, event2) {
         listeners = listeners.filter(function (listener) {
-          if (listener[0] === target && listener[1] === event2) {
+          if (listener[0] === target && listener[1] === event2 && (!callback || listener[2] === callback)) {
             target.removeEventListener(event2, listener[2], listener[3]);
             return false;
           }
@@ -1475,8 +1475,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function cancel() {
       waiting = false;
-      Components2.Transition.cancel();
       translate(getPosition());
+      Components2.Transition.cancel();
     }
 
     function toIndex(position) {
@@ -2079,13 +2079,16 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var Move = Components2.Move,
         Scroll = Components2.Scroll,
         Controller = Components2.Controller;
-    var ruleBy = Components2.Style.ruleBy;
     var track = Components2.Elements.track;
     var _Components2$Directio2 = Components2.Direction,
         resolve = _Components2$Directio2.resolve,
         orient = _Components2$Directio2.orient;
     var getPosition = Move.getPosition,
         exceededLimit = Move.exceededLimit;
+    var listenerOptions = {
+      capture: true,
+      passive: false
+    };
     var isSlide = Splide2.is(SLIDE);
     var isFade = Splide2.is(FADE);
     var basePosition;
@@ -2094,17 +2097,15 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var lastEvent;
     var isFree;
     var isDragging;
-    var isMouse;
     var hasExceeded = false;
     var clickPrevented;
     var disabled;
     var target;
 
     function mount() {
-      bind(track, POINTER_DOWN_EVENTS, onPointerDown, {
-        passive: false,
-        capture: true
-      });
+      bind(track, POINTER_MOVE_EVENTS, noop);
+      bind(track, POINTER_UP_EVENTS, noop);
+      bind(track, POINTER_DOWN_EVENTS, onPointerDown, listenerOptions);
       bind(track, "click", onClick, {
         capture: true
       });
@@ -2119,19 +2120,18 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function onPointerDown(e) {
       if (!disabled) {
-        isMouse = e.type === "mousedown";
+        var isTouch = isTouchEvent(e);
 
-        if (!isMouse || !e.button) {
+        if (isTouch || !e.button) {
           if (!Move.isBusy()) {
-            target = isMouse ? window : track;
+            target = isTouch ? track : window;
             prevBaseEvent = null;
             lastEvent = null;
             clickPrevented = false;
-            bind(target, POINTER_MOVE_EVENTS, onPointerMove);
-            bind(target, POINTER_UP_EVENTS, onPointerUp);
+            bind(target, POINTER_MOVE_EVENTS, onPointerMove, listenerOptions);
+            bind(target, POINTER_UP_EVENTS, onPointerUp, listenerOptions);
             Move.cancel();
             Scroll.cancel();
-            ruleBy(track, "will-change", "transform");
             save(e);
           } else {
             prevent(e, true);
@@ -2164,8 +2164,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
           emit(EVENT_DRAGGING);
           prevent(e);
         } else {
-          var threshold = options.dragMinThreshold || 15;
-          isDragging = isMouse || abs(coordOf(e) - coordOf(baseEvent)) > threshold;
+          var threshold = options.dragMinThreshold || 5;
+          isDragging = !isTouchEvent(e) || abs(coordOf(e) - coordOf(baseEvent)) > threshold;
 
           if (isSliderDirection()) {
             prevent(e);
@@ -2175,8 +2175,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function onPointerUp(e) {
-      unbind(target, POINTER_MOVE_EVENTS + " " + POINTER_UP_EVENTS);
-      ruleBy(track, "will-change", "");
+      unbind(target, POINTER_MOVE_EVENTS, onPointerMove);
+      unbind(target, POINTER_UP_EVENTS, onPointerUp);
 
       if (lastEvent) {
         if (isDragging || e.cancelable && isSliderDirection()) {
@@ -2243,8 +2243,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function coordOf(e, orthogonal) {
-      var prop = "page" + resolve(orthogonal ? "Y" : "X");
-      return (isMouse ? e : e.touches[0])[prop];
+      return (isTouchEvent(e) ? e.touches[0] : e)["page" + resolve(orthogonal ? "Y" : "X")];
+    }
+
+    function isTouchEvent(e) {
+      return typeof TouchEvent !== "undefined" && e instanceof TouchEvent;
     }
 
     function timeOf(e) {

dist/types/components/Drag/Drag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drag.d.ts","sourceRoot":"","sources":["Drag.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,OAAO,CAAE,QAAQ,EAAE,OAAO,GAAI,IAAI,CAAA;CACnC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CA+T9F"}
+{"version":3,"file":"Drag.d.ts","sourceRoot":"","sources":["Drag.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,OAAO,CAAE,QAAQ,EAAE,OAAO,GAAI,IAAI,CAAA;CACnC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAsU9F"}

dist/types/constructors/EventInterface/EventInterface.d.ts

@@ -14,7 +14,7 @@ export interface EventInterfaceObject {
     emit<K extends keyof EventMap>(event: K, ...args: EventMap[K]): void;
     emit(event: string, ...args: any[]): void;
     bind(target: Element | Window | Document | Array<Element | Window | Document>, events: string, callback: AnyFunction, options?: AddEventListenerOptions): void;
-    unbind(target: Element | Window | Document | Array<Element | Window | Document>, events: string): void;
+    unbind(target: Element | Window | Document | Array<Element | Window | Document>, events: string, callback?: AnyFunction): void;
     destroy(): void;
 }
 /**

dist/types/constructors/EventInterface/EventInterface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventInterface.d.ts","sourceRoot":"","sources":["EventInterface.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGxD;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,EAAE,CAAC,CAAC,SAAS,MAAM,QAAQ,EAAG,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAE,GAAG,IAAI,EAAE,QAAQ,CAAE,CAAC,CAAE,KAAM,IAAI,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,IAAI,CAAC;IAChH,EAAE,CAAE,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,IAAI,CAAC;IACrF,GAAG,CAAC,CAAC,SAAS,MAAM,QAAQ,EAAG,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,MAAM,GAAG,MAAM,EAAE,GAAI,IAAI,CAAC;IAC3E,IAAI,CAAC,CAAC,SAAS,MAAM,QAAQ,EAAG,KAAK,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,QAAQ,CAAE,CAAC,CAAE,GAAI,IAAI,CAAA;IACxE,IAAI,CAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAI,IAAI,CAAC;IAC5C,IAAI,CACF,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC,EACxE,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,WAAW,EACrB,OAAO,CAAC,EAAE,uBAAuB,GAChC,IAAI,CAAA;IACP,MAAM,CAAE,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC,EAAE,MAAM,EAAE,MAAM,GAAI,IAAI,CAAC;IACzG,OAAO,IAAI,IAAI,CAAC;CACjB;AASD;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAE,MAAM,EAAE,MAAM,GAAI,oBAAoB,CAsHrE"}
+{"version":3,"file":"EventInterface.d.ts","sourceRoot":"","sources":["EventInterface.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGxD;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,EAAE,CAAC,CAAC,SAAS,MAAM,QAAQ,EAAG,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAE,GAAG,IAAI,EAAE,QAAQ,CAAE,CAAC,CAAE,KAAM,IAAI,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,IAAI,CAAC;IAChH,EAAE,CAAE,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,IAAI,CAAC;IACrF,GAAG,CAAC,CAAC,SAAS,MAAM,QAAQ,EAAG,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,MAAM,GAAG,MAAM,EAAE,GAAI,IAAI,CAAC;IAC3E,IAAI,CAAC,CAAC,SAAS,MAAM,QAAQ,EAAG,KAAK,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,QAAQ,CAAE,CAAC,CAAE,GAAI,IAAI,CAAA;IACxE,IAAI,CAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAI,IAAI,CAAC;IAC5C,IAAI,CACF,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC,EACxE,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,WAAW,EACrB,OAAO,CAAC,EAAE,uBAAuB,GAChC,IAAI,CAAA;IACP,MAAM,CACJ,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC,EACxE,MAAM,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,WAAW,GACrB,IAAI,CAAC;IACR,OAAO,IAAI,IAAI,CAAC;CACjB;AASD;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAE,MAAM,EAAE,MAAM,GAAI,oBAAoB,CAuHrE"}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

src/js/components/Drag/Drag.ts

@@ -3,7 +3,7 @@ import { FADE, LOOP, SLIDE } from '../../constants/types';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { abs, clamp, min, prevent, sign } from '../../utils';
+import { abs, clamp, min, noop, prevent, sign } from '../../utils';
 import { FRICTION, LOG_INTERVAL, POINTER_DOWN_EVENTS, POINTER_MOVE_EVENTS, POINTER_UP_EVENTS } from './constants';
 
 
@@ -30,10 +30,10 @@ export interface DragComponent extends BaseComponent {
 export function Drag( Splide: Splide, Components: Components, options: Options ): DragComponent {
   const { on, emit, bind, unbind } = EventInterface( Splide );
   const { Move, Scroll, Controller } = Components;
-  const { ruleBy } = Components.Style;
   const { track } = Components.Elements;
   const { resolve, orient } = Components.Direction;
   const { getPosition, exceededLimit } = Move;
+  const listenerOptions = { capture: true, passive: false };
   const isSlide = Splide.is( SLIDE );
   const isFade  = Splide.is( FADE );
 
@@ -67,11 +67,6 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
    */
   let isDragging: boolean;
 
-  /**
-   * Indicates whether the user drags the slider by the mouse or not.
-   */
-  let isMouse: boolean;
-
   /**
    * Indicates whether the slider exceeds limits or not.
    * This must not be `undefined` for strict comparison.
@@ -97,8 +92,11 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
    * Called when the component is mounted.
    */
   function mount(): void {
-    bind( track, POINTER_DOWN_EVENTS, onPointerDown, { passive: false, capture: true } );
+    bind( track, POINTER_MOVE_EVENTS, noop );
+    bind( track, POINTER_UP_EVENTS, noop );
+    bind( track, POINTER_DOWN_EVENTS, onPointerDown, listenerOptions );
     bind( track, 'click', onClick, { capture: true } );
+
     on( [ EVENT_MOUNTED, EVENT_UPDATED ], init );
   }
 
@@ -120,20 +118,19 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
    */
   function onPointerDown( e: TouchEvent | MouseEvent ): void {
     if ( ! disabled ) {
-      isMouse = e.type === 'mousedown';
+      const isTouch = isTouchEvent( e );
 
-      if ( ! isMouse || ! ( e as MouseEvent ).button ) {
+      if ( isTouch || ! e.button ) {
         if ( ! Move.isBusy() ) {
-          target         = isMouse ? window : track;
+          target         = isTouch ? track : window;
           prevBaseEvent  = null;
           lastEvent      = null;
           clickPrevented = false;
 
-          bind( target, POINTER_MOVE_EVENTS, onPointerMove );
-          bind( target, POINTER_UP_EVENTS, onPointerUp );
+          bind( target, POINTER_MOVE_EVENTS, onPointerMove, listenerOptions );
+          bind( target, POINTER_UP_EVENTS, onPointerUp, listenerOptions );
           Move.cancel();
           Scroll.cancel();
-          ruleBy( track, 'will-change', 'transform' );
           save( e );
         } else {
           prevent( e, true );
@@ -171,8 +168,8 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
         emit( EVENT_DRAGGING );
         prevent( e );
       } else {
-        const threshold = options.dragMinThreshold || 15;
-        isDragging = isMouse || abs( coordOf( e ) - coordOf( baseEvent ) ) > threshold;
+        const threshold = options.dragMinThreshold || 5;
+        isDragging = ! isTouchEvent( e ) || abs( coordOf( e ) - coordOf( baseEvent ) ) > threshold;
 
         if ( isSliderDirection() ) {
           prevent( e );
@@ -189,8 +186,8 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
    * @param e - A TouchEvent or MouseEvent object
    */
   function onPointerUp( e: TouchEvent | MouseEvent ): void {
-    unbind( target, `${ POINTER_MOVE_EVENTS } ${ POINTER_UP_EVENTS }` );
-    ruleBy( track, 'will-change', '' );
+    unbind( target, POINTER_MOVE_EVENTS, onPointerMove );
+    unbind( target, POINTER_UP_EVENTS, onPointerUp );
 
     if ( lastEvent ) {
       if ( isDragging || ( e.cancelable && isSliderDirection() ) ) {
@@ -306,8 +303,18 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
    * @return A pageX or pageY coordinate.
    */
   function coordOf( e: TouchEvent | MouseEvent, orthogonal?: boolean ): number {
-    const prop = `page${ resolve( orthogonal ? 'Y' : 'X' ) }`;
-    return ( isMouse ? e : ( e as TouchEvent ).touches[ 0 ] )[ prop ];
+    return ( isTouchEvent( e ) ? e.touches[ 0 ] : e )[ `page${ resolve( orthogonal ? 'Y' : 'X' ) }` ];
+  }
+
+  /**
+   * Checks if the provided event is TouchEvent or MouseEvent.
+   *
+   * @param e - An event to check.
+   *
+   * @return `true` if the `e` is TouchEvent.
+   */
+  function isTouchEvent( e: TouchEvent | MouseEvent ): e is TouchEvent {
+    return typeof TouchEvent !== 'undefined' && e instanceof TouchEvent;
   }
 
   /**

src/js/components/Move/Move.ts

@@ -158,8 +158,8 @@ export function Move( Splide: Splide, Components: Components, options: Options )
    */
   function cancel(): void {
     waiting = false;
-    Components.Transition.cancel();
     translate( getPosition() );
+    Components.Transition.cancel();
   }
 
   /**

src/js/constructors/EventInterface/EventInterface.ts

@@ -23,7 +23,11 @@ export interface EventInterfaceObject {
     callback: AnyFunction,
     options?: AddEventListenerOptions
   ): void
-  unbind( target: Element | Window | Document | Array<Element | Window | Document>, events: string ): void;
+  unbind(
+    target: Element | Window | Document | Array<Element | Window | Document>,
+    events: string,
+    callback?: AnyFunction,
+  ): void;
   destroy(): void;
 }
 
@@ -105,13 +109,14 @@ export function EventInterface( Splide: Splide ): EventInterfaceObject {
   /**
    * Removes the event handler.
    *
-   * @param targets - A target element, the window object or the document object.
-   * @param events  - An event name or names to remove.
+   * @param targets  - A target element, the window object or the document object.
+   * @param events   - An event name or names to remove.
+   * @param callback - Optional. Specify the callback to remove.
    */
-  function unbind( targets: EventTarget | EventTarget[], events: string ): void {
+  function unbind( targets: EventTarget | EventTarget[], events: string, callback?: AnyFunction ): void {
     forEachEvent( targets, events, ( target, event ) => {
       listeners = listeners.filter( listener => {
-        if ( listener[ 0 ] === target && listener[ 1 ] === event ) {
+        if ( listener[ 0 ] === target && listener[ 1 ] === event && ( ! callback || listener[ 2 ] === callback ) ) {
           target.removeEventListener( event, listener[ 2 ], listener[ 3 ] );
           return false;
         }

src/js/test/php/examples/default.php

@@ -65,10 +65,6 @@ $settings = get_settings();
     body {
       margin: 50em 0;
     }
-
-    .splide__slide {
-      overflow: hidden;
-    }
   </style>
 </head>
 <body>

src/js/test/php/examples/multiple.php

@@ -0,0 +1,143 @@
+<?php
+require_once '../parts.php';
+require_once '../settings.php';
+
+$settings = get_settings();
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Multiple</title>
+
+  <link rel="stylesheet" href="../../../../../dist/css/splide-core.min.css">
+<!--  <link rel="stylesheet" href="../../../../../dist/css/themes/splide---><?php //echo $settings['theme'] ?><!--.min.css">-->
+  <link rel="stylesheet" href="../../assets/css/styles.css">
+  <script type="text/javascript" src="../../../../../dist/js/splide.js"></script>
+
+  <script>
+    document.addEventListener( 'DOMContentLoaded', function () {
+      new Splide( '#splide01', {
+        type             : 'slide',
+        perPage          : 1,
+        // gap              : '.5rem',
+        pagination: false,
+        // speed: 1000,
+        arrows: false,
+        classes: {
+          arrows: 'splide__arrows splide__test',
+        },
+      } ).mount();
+
+      new Splide( '#splide02', {
+        perPage          : 1,
+        gap              : '1.5rem',
+        pagination: false,
+        arrows: false,
+        classes: {
+          arrows: 'splide__arrows splide__test',
+        },
+      } ).mount();
+
+      new Splide( '#splide03', {
+        type             : 'slide',
+        perPage          : 3,
+        gap              : '1.5rem',
+        pagination: false,
+        arrows: false,
+        classes: {
+          arrows: 'splide__arrows splide__test',
+        },
+      } ).mount();
+
+      new Splide( '#splide04', {
+        type             : 'slide',
+        perPage          : 1,
+        gap              : '1.5rem',
+        pagination: false,
+        arrows: false,
+        classes: {
+          arrows: 'splide__arrows splide__test',
+        },
+      } ).mount();
+
+      new Splide( '#splide05', {
+        type             : 'slide',
+        perPage          : 2,
+        gap              : '1.5rem',
+        pagination: false,
+        arrows: false,
+        classes: {
+          arrows: 'splide__arrows splide__test',
+        },
+      } ).mount();
+
+      new Splide( '#splide06', {
+        type             : 'slide',
+        perPage          : 4,
+        gap              : '1.5rem',
+        pagination: false,
+        arrows: false,
+        classes: {
+          arrows: 'splide__arrows splide__test',
+        },
+      } ).mount();
+
+      new Splide( '#splide07', {
+        type             : 'slide',
+        perPage          : 1,
+        gap              : '1.5rem',
+        pagination: false,
+        arrows: false,
+        classes: {
+          arrows: 'splide__arrows splide__test',
+        },
+      } ).mount();
+
+      new Splide( '#splide08', {
+        type             : 'slide',
+        perPage          : 3,
+        gap              : '1.5rem',
+        pagination: false,
+        arrows: false,
+        classes: {
+          arrows: 'splide__arrows splide__test',
+        },
+      } ).mount();
+
+      new Splide( '#splide09', {
+        type             : 'slide',
+        perPage          : 3,
+        gap              : '1.5rem',
+        pagination: false,
+        arrows: false,
+        classes: {
+          arrows: 'splide__arrows splide__test',
+        },
+      } ).mount();
+    } );
+  </script>
+
+  <style>
+    body {
+      margin: 50em 0;
+    }
+  </style>
+</head>
+<body>
+
+<?php render(); ?>
+
+<?php render( 'splide02' ); ?>
+<?php render( 'splide03' ); ?>
+<?php render( 'splide04' ); ?>
+<?php render( 'splide05' ); ?>
+<?php render( 'splide06' ); ?>
+<?php render( 'splide07' ); ?>
+<?php render( 'splide08' ); ?>
+<?php render( 'splide09' ); ?>
+
+</body>
+</html>