Revise the sync system with removing the loop point.

dist/js/splide-renderer.min.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.2.7
+ * Version  : 3.3.0
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.2.7
+ * Version  : 3.3.0
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -804,7 +804,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   function initNavigation() {
     const idx = isClone ? slideIndex : index;
     const label = format(options.i18n.slideX, idx + 1);
-    const controls = Splide2.splides.map((splide) => splide.root.id).join(" ");
+    const controls = Splide2.splides.map((target) => target.splide.root.id).join(" ");
     setAttribute(slide, ARIA_LABEL, label);
     setAttribute(slide, ARIA_CONTROLS, controls);
     setAttribute(slide, ROLE, "menuitem");
@@ -1170,8 +1170,9 @@ function Move(Splide2, Components2, options) {
   const { slideSize, getPadding, totalSize, listSize, sliderSize } = Components2.Layout;
   const { resolve, orient } = Components2.Direction;
   const { list, track } = Components2.Elements;
-  let waiting;
+  let Transition;
   function mount() {
+    Transition = Components2.Transition;
     on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
   }
   function destroy() {
@@ -1188,13 +1189,13 @@ function Move(Splide2, Components2, options) {
     if (!isBusy()) {
       const { set } = Splide2.state;
       const position = getPosition();
-      const looping = dest !== index;
-      waiting = looping || options.waitForTransition;
+      if (dest !== index) {
+        Transition.cancel();
+        translate(shift(position, dest > index), true);
+      }
       set(MOVING);
       emit(EVENT_MOVE, index, prev, dest);
-      Components2.Transition.start(dest, () => {
-        looping && jump(index);
-        waiting = false;
+      Transition.start(index, () => {
         set(IDLE);
         emit(EVENT_MOVED, index, prev, dest);
         if (options.trimSpace === "move" && dest !== prev && position === getPosition()) {
@@ -1214,7 +1215,7 @@ function Move(Splide2, Components2, options) {
     }
   }
   function loop(position) {
-    if (!waiting && Splide2.is(LOOP)) {
+    if (Splide2.is(LOOP)) {
       const diff = orient(position - getPosition());
       const exceededMin = exceededLimit(false, position) && diff < 0;
       const exceededMax = exceededLimit(true, position) && diff > 0;
@@ -1227,13 +1228,12 @@ function Move(Splide2, Components2, options) {
   function shift(position, backwards) {
     const excess = position - getLimit(backwards);
     const size = sliderSize();
-    position -= sign(excess) * size * ceil(abs(excess) / size);
+    position -= orient(size * (ceil(abs(excess) / size) || 1)) * (backwards ? 1 : -1);
     return position;
   }
   function cancel() {
-    waiting = false;
     translate(getPosition());
-    Components2.Transition.cancel();
+    Transition.cancel();
   }
   function toIndex(position) {
     const Slides = Components2.Slides.get();
@@ -1273,7 +1273,7 @@ function Move(Splide2, Components2, options) {
     return toPosition(max ? Components2.Controller.getEnd() : 0, !!options.trimSpace);
   }
   function isBusy() {
-    return !!waiting;
+    return Splide2.state.is(MOVING) && options.waitForTransition;
   }
   function exceededLimit(max, position) {
     position = isUndefined(position) ? getPosition() : position;
@@ -1828,6 +1828,10 @@ function Drag(Splide2, Components2, options) {
         prevent(e);
       }
       emit(EVENT_DRAGGED);
+    } else {
+      if (!isFree) {
+        Controller.go(Splide2.index, true);
+      }
     }
     dragging = false;
   }
@@ -2111,14 +2115,14 @@ function Pagination(Splide2, Components2, options) {
 
 const TRIGGER_KEYS = [" ", "Enter", "Spacebar"];
 function Sync(Splide2, Components2, options) {
-  const { splides } = Splide2;
   const { list } = Components2.Elements;
   const events = [];
   function mount() {
+    Splide2.splides.forEach((target) => {
+      !target.isChild && sync(target.splide);
+    });
     if (options.isNavigation) {
       navigate();
-    } else {
-      splides.length && sync();
     }
   }
   function destroy() {
@@ -2132,19 +2136,12 @@ function Sync(Splide2, Components2, options) {
     destroy();
     mount();
   }
-  function sync() {
-    const processed = [];
-    splides.concat(Splide2).forEach((splide, index, instances) => {
-      const event = EventInterface(splide);
-      event.on(EVENT_MOVE, (index2, prev, dest) => {
-        instances.forEach((instance) => {
-          if (instance !== splide && !includes(processed, splide)) {
-            processed.push(instance);
-            instance.Components.Move.cancel();
-            instance.go(instance.is(LOOP) ? dest : index2);
-          }
-        });
-        empty(processed);
+  function sync(splide) {
+    [Splide2, splide].forEach((instance) => {
+      const event = EventInterface(instance);
+      const target = instance === Splide2 ? splide : Splide2;
+      event.on(EVENT_MOVE, (index, prev, dest) => {
+        target.go(target.is(LOOP) ? dest : index);
       });
       events.push(event);
     });
@@ -2362,8 +2359,8 @@ const _Splide = class {
     return this;
   }
   sync(splide) {
-    this.splides.push(splide);
-    splide.splides.push(this);
+    this.splides.push({ splide });
+    splide.splides.push({ splide: this, isChild: true });
     if (this.state.is(IDLE)) {
       this._Components.Sync.remount();
       splide.Components.Sync.remount();

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.2.7
+ * Version  : 3.3.0
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -800,7 +800,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   function initNavigation() {
     const idx = isClone ? slideIndex : index;
     const label = format(options.i18n.slideX, idx + 1);
-    const controls = Splide2.splides.map((splide) => splide.root.id).join(" ");
+    const controls = Splide2.splides.map((target) => target.splide.root.id).join(" ");
     setAttribute(slide, ARIA_LABEL, label);
     setAttribute(slide, ARIA_CONTROLS, controls);
     setAttribute(slide, ROLE, "menuitem");
@@ -1166,8 +1166,9 @@ function Move(Splide2, Components2, options) {
   const { slideSize, getPadding, totalSize, listSize, sliderSize } = Components2.Layout;
   const { resolve, orient } = Components2.Direction;
   const { list, track } = Components2.Elements;
-  let waiting;
+  let Transition;
   function mount() {
+    Transition = Components2.Transition;
     on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
   }
   function destroy() {
@@ -1184,13 +1185,13 @@ function Move(Splide2, Components2, options) {
     if (!isBusy()) {
       const { set } = Splide2.state;
       const position = getPosition();
-      const looping = dest !== index;
-      waiting = looping || options.waitForTransition;
+      if (dest !== index) {
+        Transition.cancel();
+        translate(shift(position, dest > index), true);
+      }
       set(MOVING);
       emit(EVENT_MOVE, index, prev, dest);
-      Components2.Transition.start(dest, () => {
-        looping && jump(index);
-        waiting = false;
+      Transition.start(index, () => {
         set(IDLE);
         emit(EVENT_MOVED, index, prev, dest);
         if (options.trimSpace === "move" && dest !== prev && position === getPosition()) {
@@ -1210,7 +1211,7 @@ function Move(Splide2, Components2, options) {
     }
   }
   function loop(position) {
-    if (!waiting && Splide2.is(LOOP)) {
+    if (Splide2.is(LOOP)) {
       const diff = orient(position - getPosition());
       const exceededMin = exceededLimit(false, position) && diff < 0;
       const exceededMax = exceededLimit(true, position) && diff > 0;
@@ -1223,13 +1224,12 @@ function Move(Splide2, Components2, options) {
   function shift(position, backwards) {
     const excess = position - getLimit(backwards);
     const size = sliderSize();
-    position -= sign(excess) * size * ceil(abs(excess) / size);
+    position -= orient(size * (ceil(abs(excess) / size) || 1)) * (backwards ? 1 : -1);
     return position;
   }
   function cancel() {
-    waiting = false;
     translate(getPosition());
-    Components2.Transition.cancel();
+    Transition.cancel();
   }
   function toIndex(position) {
     const Slides = Components2.Slides.get();
@@ -1269,7 +1269,7 @@ function Move(Splide2, Components2, options) {
     return toPosition(max ? Components2.Controller.getEnd() : 0, !!options.trimSpace);
   }
   function isBusy() {
-    return !!waiting;
+    return Splide2.state.is(MOVING) && options.waitForTransition;
   }
   function exceededLimit(max, position) {
     position = isUndefined(position) ? getPosition() : position;
@@ -1824,6 +1824,10 @@ function Drag(Splide2, Components2, options) {
         prevent(e);
       }
       emit(EVENT_DRAGGED);
+    } else {
+      if (!isFree) {
+        Controller.go(Splide2.index, true);
+      }
     }
     dragging = false;
   }
@@ -2107,14 +2111,14 @@ function Pagination(Splide2, Components2, options) {
 
 const TRIGGER_KEYS = [" ", "Enter", "Spacebar"];
 function Sync(Splide2, Components2, options) {
-  const { splides } = Splide2;
   const { list } = Components2.Elements;
   const events = [];
   function mount() {
+    Splide2.splides.forEach((target) => {
+      !target.isChild && sync(target.splide);
+    });
     if (options.isNavigation) {
       navigate();
-    } else {
-      splides.length && sync();
     }
   }
   function destroy() {
@@ -2128,19 +2132,12 @@ function Sync(Splide2, Components2, options) {
     destroy();
     mount();
   }
-  function sync() {
-    const processed = [];
-    splides.concat(Splide2).forEach((splide, index, instances) => {
-      const event = EventInterface(splide);
-      event.on(EVENT_MOVE, (index2, prev, dest) => {
-        instances.forEach((instance) => {
-          if (instance !== splide && !includes(processed, splide)) {
-            processed.push(instance);
-            instance.Components.Move.cancel();
-            instance.go(instance.is(LOOP) ? dest : index2);
-          }
-        });
-        empty(processed);
+  function sync(splide) {
+    [Splide2, splide].forEach((instance) => {
+      const event = EventInterface(instance);
+      const target = instance === Splide2 ? splide : Splide2;
+      event.on(EVENT_MOVE, (index, prev, dest) => {
+        target.go(target.is(LOOP) ? dest : index);
       });
       events.push(event);
     });
@@ -2358,8 +2355,8 @@ const _Splide = class {
     return this;
   }
   sync(splide) {
-    this.splides.push(splide);
-    splide.splides.push(this);
+    this.splides.push({ splide });
+    splide.splides.push({ splide: this, isChild: true });
     if (this.state.is(IDLE)) {
       this._Components.Sync.remount();
       splide.Components.Sync.remount();

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 3.2.7
+ * Version  : 3.3.0
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -908,8 +908,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     function initNavigation() {
       var idx = isClone ? slideIndex : index;
       var label = format(options.i18n.slideX, idx + 1);
-      var controls = Splide2.splides.map(function (splide) {
-        return splide.root.id;
+      var controls = Splide2.splides.map(function (target) {
+        return target.splide.root.id;
       }).join(" ");
       setAttribute(slide, ARIA_LABEL, label);
       setAttribute(slide, ARIA_CONTROLS, controls);
@@ -1386,9 +1386,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var _Components2$Elements3 = Components2.Elements,
         list = _Components2$Elements3.list,
         track = _Components2$Elements3.track;
-    var waiting;
+    var Transition;
 
     function mount() {
+      Transition = Components2.Transition;
       on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
     }
 
@@ -1408,13 +1409,15 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       if (!isBusy()) {
         var set = Splide2.state.set;
         var position = getPosition();
-        var looping = dest !== index;
-        waiting = looping || options.waitForTransition;
+
+        if (dest !== index) {
+          Transition.cancel();
+          translate(shift(position, dest > index), true);
+        }
+
         set(MOVING);
         emit(EVENT_MOVE, index, prev, dest);
-        Components2.Transition.start(dest, function () {
-          looping && jump(index);
-          waiting = false;
+        Transition.start(index, function () {
           set(IDLE);
           emit(EVENT_MOVED, index, prev, dest);
 
@@ -1438,7 +1441,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function loop(position) {
-      if (!waiting && Splide2.is(LOOP)) {
+      if (Splide2.is(LOOP)) {
         var diff = orient(position - getPosition());
         var exceededMin = exceededLimit(false, position) && diff < 0;
         var exceededMax = exceededLimit(true, position) && diff > 0;
@@ -1454,14 +1457,13 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     function shift(position, backwards) {
       var excess = position - getLimit(backwards);
       var size = sliderSize();
-      position -= sign(excess) * size * ceil(abs(excess) / size);
+      position -= orient(size * (ceil(abs(excess) / size) || 1)) * (backwards ? 1 : -1);
       return position;
     }
 
     function cancel() {
-      waiting = false;
       translate(getPosition());
-      Components2.Transition.cancel();
+      Transition.cancel();
     }
 
     function toIndex(position) {
@@ -1512,7 +1514,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function isBusy() {
-      return !!waiting;
+      return Splide2.state.is(MOVING) && options.waitForTransition;
     }
 
     function exceededLimit(max, position) {
@@ -2206,6 +2208,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         }
 
         emit(EVENT_DRAGGED);
+      } else {
+        if (!isFree) {
+          Controller.go(Splide2.index, true);
+        }
       }
 
       dragging = false;
@@ -2588,15 +2594,16 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var TRIGGER_KEYS = [" ", "Enter", "Spacebar"];
 
   function Sync(Splide2, Components2, options) {
-    var splides = Splide2.splides;
     var list = Components2.Elements.list;
     var events = [];
 
     function mount() {
+      Splide2.splides.forEach(function (target) {
+        !target.isChild && sync(target.splide);
+      });
+
       if (options.isNavigation) {
         navigate();
-      } else {
-        splides.length && sync();
       }
     }
 
@@ -2613,19 +2620,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       mount();
     }
 
-    function sync() {
-      var processed = [];
-      splides.concat(Splide2).forEach(function (splide, index, instances) {
-        var event = EventInterface(splide);
-        event.on(EVENT_MOVE, function (index2, prev, dest) {
-          instances.forEach(function (instance) {
-            if (instance !== splide && !includes(processed, splide)) {
-              processed.push(instance);
-              instance.Components.Move.cancel();
-              instance.go(instance.is(LOOP) ? dest : index2);
-            }
-          });
-          empty(processed);
+    function sync(splide) {
+      [Splide2, splide].forEach(function (instance) {
+        var event = EventInterface(instance);
+        var target = instance === Splide2 ? splide : Splide2;
+        event.on(EVENT_MOVE, function (index, prev, dest) {
+          target.go(target.is(LOOP) ? dest : index);
         });
         events.push(event);
       });
@@ -2880,8 +2880,13 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     };
 
     _proto.sync = function sync(splide) {
-      this.splides.push(splide);
-      splide.splides.push(this);
+      this.splides.push({
+        splide: splide
+      });
+      splide.splides.push({
+        splide: this,
+        isChild: true
+      });
 
       if (this.state.is(IDLE)) {
         this._Components.Sync.remount();

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,CAAC;IACnC,UAAU,IAAI,OAAO,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAsU9F"}
+{"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,CAAC;IACnC,UAAU,IAAI,OAAO,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CA0U9F"}

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

@@ -1 +1 @@
-{"version":3,"file":"Move.d.ts","sourceRoot":"","sources":["Move.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAI9E;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,IAAI,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IAChF,IAAI,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAC5B,SAAS,CAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;IAC3D,KAAK,CAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,GAAI,MAAM,CAAC;IACtD,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,CAAE,QAAQ,EAAE,MAAM,GAAI,MAAM,CAAC;IACpC,UAAU,CAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACxD,WAAW,IAAI,MAAM,CAAC;IACtB,QAAQ,CAAE,GAAG,EAAE,OAAO,GAAI,MAAM,CAAC;IACjC,MAAM,IAAI,OAAO,CAAC;IAClB,aAAa,CAAE,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,OAAO,CAAC;CACxE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAsQ9F"}
+{"version":3,"file":"Move.d.ts","sourceRoot":"","sources":["Move.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,aAAa,CAAC;AAInG;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,IAAI,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IAChF,IAAI,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAC5B,SAAS,CAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;IAC3D,KAAK,CAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,GAAI,MAAM,CAAC;IACtD,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,CAAE,QAAQ,EAAE,MAAM,GAAI,MAAM,CAAC;IACpC,UAAU,CAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACxD,WAAW,IAAI,MAAM,CAAC;IACtB,QAAQ,CAAE,GAAG,EAAE,OAAO,GAAI,MAAM,CAAC;IACjC,MAAM,IAAI,OAAO,CAAC;IAClB,aAAa,CAAE,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,OAAO,CAAC;CACxE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAuQ9F"}

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

@@ -1 +1 @@
-{"version":3,"file":"Sync.d.ts","sourceRoot":"","sources":["Sync.ts"],"names":[],"mappings":"AAYA,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,IAAI,IAAI,CAAC;CACjB;AASD;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAgH9F"}
+{"version":3,"file":"Sync.d.ts","sourceRoot":"","sources":["Sync.ts"],"names":[],"mappings":"AAYA,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,IAAI,IAAI,CAAC;CACjB;AASD;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAyG9F"}

dist/types/core/Splide/Splide.d.ts

@@ -1,6 +1,6 @@
 import { SlideMatcher } from '../../components/Slides/Slides';
-import { EventBusObject, StateObject } from '../../constructors';
-import { ComponentConstructor, Components, EventMap, Options } from '../../types';
+import { EventBusCallback, EventBusObject, StateObject } from '../../constructors';
+import { ComponentConstructor, Components, EventMap, Options, SyncTarget } from '../../types';
 /**
  * The frontend class for the Splide slider.
  *
@@ -38,9 +38,9 @@ export declare class Splide {
      */
     readonly state: StateObject;
     /**
-     * Splide instances to sync with.
+     * An array with SyncTarget objects for splide instances to sync with.
      */
-    readonly splides: Splide[];
+    readonly splides: SyncTarget[];
     /**
      * The collection of options.
      */
@@ -152,6 +152,7 @@ export declare class Splide {
      * @return `this`
      */
     on<K extends keyof EventMap>(events: K, callback: EventMap[K]): this;
+    on(events: string | string[], callback: EventBusCallback): this;
     /**
      * Removes the registered all handlers for the specified event or events.
      * If you want to only remove a particular handler, use namespace to identify it.

dist/types/types/general.d.ts

@@ -42,4 +42,13 @@ export declare type Components = Record<string, BaseComponent> & Partial<{
 }> & {
     Transition: TransitionComponent;
 };
+/**
+ * The interface for info of a splide instance to sync with.
+ *
+ * @since 3.2.8
+ */
+export interface SyncTarget {
+    splide: Splide;
+    isChild?: boolean;
+}
 //# sourceMappingURL=../../../src/js/types/general.d.ts.map

dist/types/types/general.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"general.d.ts","sourceRoot":"","sources":["general.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC;;;;GAIG;AACH,oBAAY,WAAW,GAAG,CAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAM,GAAG,CAAC;AAEpD;;;;GAIG;AACH,oBAAY,oBAAoB,GAAG,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,KAAM,aAAa,CAAC;AAEjH;;;;GAIG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,IAAI,IAAI,CAAC;IACf,KAAK,CAAC,IAAI,IAAI,CAAC;IACf,OAAO,CAAC,CAAE,UAAU,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;CACxC;AAED;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,KAAK,CAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,IAAI,GAAI,IAAI,CAAC;IAC/C,MAAM,IAAI,IAAI,CAAC;CAChB;AAED;;;;GAIG;AACH,oBAAY,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAClD,OAAO,CAAC;KACN,CAAC,IAAI,MAAM,OAAO,cAAc,GAAI,UAAU,CAAC,OAAO,cAAc,CAAE,CAAC,CAAE,CAAC;CAC7E,CAAC,GACA;IAAE,UAAU,EAAE,mBAAmB,CAAA;CAAE,CAAA"}
+{"version":3,"file":"general.d.ts","sourceRoot":"","sources":["general.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC;;;;GAIG;AACH,oBAAY,WAAW,GAAG,CAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAM,GAAG,CAAC;AAEpD;;;;GAIG;AACH,oBAAY,oBAAoB,GAAG,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,KAAM,aAAa,CAAC;AAEjH;;;;GAIG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,IAAI,IAAI,CAAC;IACf,KAAK,CAAC,IAAI,IAAI,CAAC;IACf,OAAO,CAAC,CAAE,UAAU,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;CACxC;AAED;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,KAAK,CAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,IAAI,GAAI,IAAI,CAAC;IAC/C,MAAM,IAAI,IAAI,CAAC;CAChB;AAED;;;;GAIG;AACH,oBAAY,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAClD,OAAO,CAAC;KACN,CAAC,IAAI,MAAM,OAAO,cAAc,GAAI,UAAU,CAAC,OAAO,cAAc,CAAE,CAAC,CAAE,CAAC;CAC7E,CAAC,GACA;IAAE,UAAU,EAAE,mBAAmB,CAAA;CAAE,CAAA;AAEvC;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.2.7",
+  "version": "3.3.0",
   "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

@@ -209,6 +209,10 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
       }
 
       emit( EVENT_DRAGGED );
+    } else {
+      if ( ! isFree ) {
+        Controller.go( Splide.index, true );
+      }
     }
 
     dragging = false;

src/js/components/Move/Move.ts

@@ -11,8 +11,8 @@ import { IDLE, MOVING } from '../../constants/states';
 import { FADE, LOOP, SLIDE } from '../../constants/types';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
-import { AnyFunction, BaseComponent, Components, Options } from '../../types';
-import { abs, ceil, clamp, isUndefined, rect, removeAttribute, sign } from '../../utils';
+import { AnyFunction, BaseComponent, Components, Options, TransitionComponent } from '../../types';
+import { abs, ceil, clamp, isUndefined, rect, removeAttribute } from '../../utils';
 
 
 /**
@@ -52,14 +52,15 @@ export function Move( Splide: Splide, Components: Components, options: Options )
   const { list, track } = Components.Elements;
 
   /**
-   * Indicates whether the component can move the slider or not.
+   * Holds the Transition component.
    */
-  let waiting: boolean;
+  let Transition: TransitionComponent;
 
   /**
    * Called when the component is mounted.
    */
   function mount(): void {
+    Transition = Components.Transition;
     on( [ EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH ], reposition );
   }
 
@@ -96,15 +97,16 @@ export function Move( Splide: Splide, Components: Components, options: Options )
     if ( ! isBusy() ) {
       const { set } = Splide.state;
       const position = getPosition();
-      const looping  = dest !== index;
 
-      waiting = looping || options.waitForTransition;
+      if ( dest !== index ) {
+        Transition.cancel();
+        translate( shift( position, dest > index ), true );
+      }
+
       set( MOVING );
       emit( EVENT_MOVE, index, prev, dest );
 
-      Components.Transition.start( dest, () => {
-        looping && jump( index );
-        waiting = false;
+      Transition.start( index, () => {
         set( IDLE );
         emit( EVENT_MOVED, index, prev, dest );
 
@@ -144,7 +146,7 @@ export function Move( Splide: Splide, Components: Components, options: Options )
    * @param position - A position to loop.
    */
   function loop( position: number ): number {
-    if ( ! waiting && Splide.is( LOOP ) ) {
+    if ( Splide.is( LOOP ) ) {
       const diff        = orient( position - getPosition() );
       const exceededMin = exceededLimit( false, position ) && diff < 0;
       const exceededMax = exceededLimit( true, position ) && diff > 0;
@@ -168,7 +170,7 @@ export function Move( Splide: Splide, Components: Components, options: Options )
   function shift( position: number, backwards: boolean ): number {
     const excess = position - getLimit( backwards );
     const size   = sliderSize();
-    position -= sign( excess ) * size * ceil( abs( excess ) / size );
+    position -= orient( size * ( ceil( abs( excess ) / size ) || 1 ) ) * ( backwards ? 1 : -1 );
     return position;
   }
 
@@ -176,9 +178,8 @@ export function Move( Splide: Splide, Components: Components, options: Options )
    * Cancels transition.
    */
   function cancel(): void {
-    waiting = false;
     translate( getPosition() );
-    Components.Transition.cancel();
+    Transition.cancel();
   }
 
   /**
@@ -274,7 +275,7 @@ export function Move( Splide: Splide, Components: Components, options: Options )
    * @return `true` if the slider can move, or otherwise `false`.
    */
   function isBusy(): boolean {
-    return !! waiting;
+    return Splide.state.is( MOVING ) && options.waitForTransition;
   }
 
   /**

src/js/components/Move/test/general.test.ts

@@ -117,20 +117,4 @@ describe( 'Move', () => {
 
     splide.destroy();
   } );
-
-  test( 'should not move the slider while looping.', () => {
-    const splide   = init( { type: 'loop', width: 200, height: 100, waitForTransition: false } );
-    const { Move } = splide.Components;
-
-    expect( Move.isBusy() ).toBe( false );
-
-    // Designates the clone index.
-    Move.move( splide.length, 0, -1 );
-    expect( Move.isBusy() ).toBe( true );
-
-    fire( splide.Components.Elements.list, 'transitionend' );
-    expect( Move.isBusy() ).toBe( false );
-
-    splide.destroy();
-  } );
 } );

src/js/components/Slides/Slide.ts

@@ -131,7 +131,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
   function initNavigation( this: SlideComponent ): void {
     const idx      = isClone ? slideIndex : index;
     const label    = format( options.i18n.slideX, idx + 1 );
-    const controls = Splide.splides.map( splide => splide.root.id ).join( ' ' );
+    const controls = Splide.splides.map( target => target.splide.root.id ).join( ' ' );
 
     setAttribute( slide, ARIA_LABEL, label );
     setAttribute( slide, ARIA_CONTROLS, controls );

src/js/components/Sync/Sync.ts

@@ -44,7 +44,6 @@ const TRIGGER_KEYS = [ ' ', 'Enter', 'Spacebar' ];
  * @return A Sync component object.
  */
 export function Sync( Splide: Splide, Components: Components, options: Options ): SyncComponent {
-  const { splides } = Splide;
   const { list } = Components.Elements;
   const events: EventInterfaceObject[] = [];
 
@@ -52,10 +51,12 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
    * Called when the component is mounted.
    */
   function mount(): void {
+    Splide.splides.forEach( target => {
+      ! target.isChild && sync( target.splide );
+    } );
+
     if ( options.isNavigation ) {
       navigate();
-    } else {
-      splides.length && sync();
     }
   }
 
@@ -79,25 +80,17 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
   }
 
   /**
-   * Syncs the current index among all slides.
-   * The `processed` array prevents recursive call of handlers.
+   * Syncs the current index with a provided child splide instance.
+   *
+   * @param splide - A splide instance to sync with.
    */
-  function sync(): void {
-    const processed: Splide[] = [];
-
-    splides.concat( Splide ).forEach( ( splide, index, instances ) => {
-      const event = EventInterface( splide );
+  function sync( splide: Splide ): void {
+    [ Splide, splide ].forEach( instance => {
+      const event  = EventInterface( instance );
+      const target = instance === Splide ? splide : Splide;
 
       event.on( EVENT_MOVE, ( index, prev, dest ) => {
-        instances.forEach( instance => {
-          if ( instance !== splide && ! includes( processed, splide ) ) {
-            processed.push( instance );
-            instance.Components.Move.cancel();
-            instance.go( instance.is( LOOP ) ? dest : index );
-          }
-        } );
-
-        empty( processed );
+        target.go( target.is( LOOP ) ? dest : index );
       } );
 
       events.push( event );

src/js/core/Splide/Splide.ts

@@ -8,7 +8,7 @@ import { CREATED, DESTROYED, IDLE, STATES } from '../../constants/states';
 import { FADE } from '../../constants/types';
 import { EventBus, EventBusCallback, EventBusObject, State, StateObject } from '../../constructors';
 import { Fade, Slide } from '../../transitions';
-import { ComponentConstructor, Components, EventMap, Options } from '../../types';
+import { ComponentConstructor, Components, EventMap, Options, SyncTarget } from '../../types';
 import { addClass, assert, assign, empty, forOwn, isString, merge, query, slice } from '../../utils';
 
 
@@ -49,9 +49,9 @@ export class Splide {
   readonly state: StateObject = State( CREATED );
 
   /**
-   * Splide instances to sync with.
+   * An array with SyncTarget objects for splide instances to sync with.
    */
-  readonly splides: Splide[] = [];
+  readonly splides: SyncTarget[] = [];
 
   /**
    * The collection of options.
@@ -148,8 +148,8 @@ export class Splide {
    * @return `this`
    */
   sync( splide: Splide ): this {
-    this.splides.push( splide );
-    splide.splides.push( this );
+    this.splides.push( { splide } );
+    splide.splides.push( { splide: this, isChild: true } );
 
     if ( this.state.is( IDLE ) ) {
       this._Components.Sync.remount();
@@ -223,6 +223,7 @@ export class Splide {
    * @return `this`
    */
   on<K extends keyof EventMap>( events: K, callback: EventMap[ K ] ): this;
+  on( events: string | string[], callback: EventBusCallback ): this;
   on( events: string | string[], callback: EventBusCallback ): this {
     this.event.on( events, callback, null, DEFAULT_USER_EVENT_PRIORITY );
     return this;

src/js/test/php/examples/drag-free.php

@@ -25,6 +25,7 @@ $settings = get_settings();
         height : 200,
         type   : 'loop',
         // direction: 'rtl',
+        waitForTransition: false,
       } );
 
       splide.mount();

src/js/test/php/examples/sync.php

@@ -21,8 +21,7 @@ $settings = get_settings();
         type       : 'loop',
         heightRatio: 0.3,
         perPage    : 2,
-        // waitForTransition: false,
-
+        waitForTransition: false,
         breakpoints: {
           1000: {
             destroy: true,
@@ -31,6 +30,7 @@ $settings = get_settings();
       } );
 
       var splide02 = new Splide( '#splide02', {
+        // type             : 'loop',
         width            : 600,
         fixedWidth       : 100,
         fixedHeight      : 56,
@@ -39,7 +39,7 @@ $settings = get_settings();
         focus            : 'center',
         pagination       : false,
         rewind           : true,
-        waitForTransition: true,
+        waitForTransition: false,
         dragMinThreshold: {
           mouse: 10,
           touch: 10,
@@ -47,24 +47,28 @@ $settings = get_settings();
       } );
 
       var splide03 = new Splide( '#splide03', {
-        width       : 100,
-        type        : 'loop',
-        direction   : 'ttb',
-        height      : 300,
-        fixedWidth  : 100,
-        fixedHeight : 56,
-        gap         : '.7em',
-        isNavigation: true,
-        pagination  : false,
+        width            : 100,
+        type             : 'loop',
+        direction        : 'ttb',
+        height           : 300,
+        fixedWidth       : 100,
+        fixedHeight      : 56,
+        gap              : '.7em',
+        isNavigation     : true,
+        pagination       : false,
+        waitForTransition: false,
       } );
 
       splide01.sync( splide02 );
-      // splide01.sync( splide03 );
 
       splide01.mount();
       splide02.mount();
       splide03.mount();
 
+      splide01.on( 'move', function () { console.log( 1 ) } );
+      splide02.on( 'move', function () { console.log( 2 ) } );
+      splide03.on( 'move', function () { console.log( 3 ) } );
+
       // Attempts to sync after mount.
       splide01.sync( splide03 );
     } );

src/js/test/php/parts.php

@@ -18,7 +18,7 @@ function render_slides( $number = 10, $text = false ) {
     if ( $text ) {
       printf( '<span>%s</span>', $i + 1 );
     } else {
-      printf( '<img src="../../assets/images/pics/slide%02d.jpg"><button>aaa</button>', $i + 1 );
+      printf( '<img src="../../assets/images/pics/slide%02d.jpg"><button>button</button>', $i + 1 );
     }
 
     echo '</li>' . PHP_EOL;

src/js/types/general.ts

@@ -48,3 +48,13 @@ export type Components = Record<string, BaseComponent>
     [ K in keyof typeof CoreComponents ]: ReturnType<typeof CoreComponents[ K ]>;
   }>
   & { Transition: TransitionComponent }
+
+/**
+ * The interface for info of a splide instance to sync with.
+ *
+ * @since 3.2.8
+ */
+export interface SyncTarget {
+  splide: Splide;
+  isChild?: boolean;
+}