Handle `sync()` called after mount.

dist/js/splide-renderer.min.js

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

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.2.6
+ * Version  : 3.2.7
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -782,28 +782,18 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   const focusableNodes = options.focusableNodes && queryAll(slide, options.focusableNodes);
   let destroyed;
   function mount() {
-    init();
+    if (!isClone) {
+      slide.id = `${root.id}-slide${pad(index + 1)}`;
+    }
     bind(slide, "click keydown", (e) => {
       emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, this, e);
     });
     on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], update.bind(this));
+    on(EVENT_NAVIGATION_MOUNTED, initNavigation.bind(this));
     if (updateOnMove) {
       on(EVENT_MOVE, onMove.bind(this));
     }
   }
-  function init() {
-    if (!isClone) {
-      slide.id = `${root.id}-slide${pad(index + 1)}`;
-    }
-    if (isNavigation) {
-      const idx = isClone ? slideIndex : index;
-      const label = format(options.i18n.slideX, idx + 1);
-      const controls = Splide2.splides.map((splide) => splide.root.id).join(" ");
-      setAttribute(slide, ARIA_LABEL, label);
-      setAttribute(slide, ARIA_CONTROLS, controls);
-      setAttribute(slide, ROLE, "menuitem");
-    }
-  }
   function destroy() {
     destroyed = true;
     destroyEvents();
@@ -811,6 +801,15 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     removeAttribute(slide, ALL_ATTRIBUTES);
     setAttribute(slide, "style", styles);
   }
+  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(" ");
+    setAttribute(slide, ARIA_LABEL, label);
+    setAttribute(slide, ARIA_CONTROLS, controls);
+    setAttribute(slide, ROLE, "menuitem");
+    updateActivity.call(this, isActive());
+  }
   function onMove(next, prev, dest) {
     if (!destroyed) {
       update.call(this);
@@ -2114,21 +2113,30 @@ const TRIGGER_KEYS = [" ", "Enter", "Spacebar"];
 function Sync(Splide2, Components2, options) {
   const { splides } = Splide2;
   const { list } = Components2.Elements;
+  const events = [];
   function mount() {
     if (options.isNavigation) {
       navigate();
     } else {
-      sync();
+      splides.length && sync();
     }
   }
   function destroy() {
     removeAttribute(list, ALL_ATTRIBUTES);
+    events.forEach((event) => {
+      event.destroy();
+    });
+    empty(events);
+  }
+  function remount() {
+    destroy();
+    mount();
   }
   function sync() {
     const processed = [];
     splides.concat(Splide2).forEach((splide, index, instances) => {
-      const { on } = EventInterface(splide);
-      on(EVENT_MOVE, (index2, prev, dest) => {
+      const event = EventInterface(splide);
+      event.on(EVENT_MOVE, (index2, prev, dest) => {
         instances.forEach((instance) => {
           if (instance !== splide && !includes(processed, splide)) {
             processed.push(instance);
@@ -2138,15 +2146,18 @@ function Sync(Splide2, Components2, options) {
         });
         empty(processed);
       });
+      events.push(event);
     });
   }
   function navigate() {
-    const { on, emit } = EventInterface(Splide2);
+    const event = EventInterface(Splide2);
+    const { on } = event;
     on(EVENT_CLICK, onClick);
     on(EVENT_SLIDE_KEYDOWN, onKeydown);
     on([EVENT_MOUNTED, EVENT_UPDATED], update);
     setAttribute(list, ROLE, "menu");
-    emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
+    events.push(event);
+    event.emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
   }
   function update() {
     setAttribute(list, ARIA_ORIENTATION, options.direction !== TTB ? "horizontal" : null);
@@ -2162,7 +2173,8 @@ function Sync(Splide2, Components2, options) {
   }
   return {
     mount,
-    destroy
+    destroy,
+    remount
   };
 }
 
@@ -2352,6 +2364,10 @@ const _Splide = class {
   sync(splide) {
     this.splides.push(splide);
     splide.splides.push(this);
+    if (this.state.is(IDLE)) {
+      this._Components.Sync.remount();
+      splide.Components.Sync.remount();
+    }
     return this;
   }
   go(control) {

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.2.6
+ * Version  : 3.2.7
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -778,28 +778,18 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   const focusableNodes = options.focusableNodes && queryAll(slide, options.focusableNodes);
   let destroyed;
   function mount() {
-    init();
+    if (!isClone) {
+      slide.id = `${root.id}-slide${pad(index + 1)}`;
+    }
     bind(slide, "click keydown", (e) => {
       emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, this, e);
     });
     on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], update.bind(this));
+    on(EVENT_NAVIGATION_MOUNTED, initNavigation.bind(this));
     if (updateOnMove) {
       on(EVENT_MOVE, onMove.bind(this));
     }
   }
-  function init() {
-    if (!isClone) {
-      slide.id = `${root.id}-slide${pad(index + 1)}`;
-    }
-    if (isNavigation) {
-      const idx = isClone ? slideIndex : index;
-      const label = format(options.i18n.slideX, idx + 1);
-      const controls = Splide2.splides.map((splide) => splide.root.id).join(" ");
-      setAttribute(slide, ARIA_LABEL, label);
-      setAttribute(slide, ARIA_CONTROLS, controls);
-      setAttribute(slide, ROLE, "menuitem");
-    }
-  }
   function destroy() {
     destroyed = true;
     destroyEvents();
@@ -807,6 +797,15 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     removeAttribute(slide, ALL_ATTRIBUTES);
     setAttribute(slide, "style", styles);
   }
+  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(" ");
+    setAttribute(slide, ARIA_LABEL, label);
+    setAttribute(slide, ARIA_CONTROLS, controls);
+    setAttribute(slide, ROLE, "menuitem");
+    updateActivity.call(this, isActive());
+  }
   function onMove(next, prev, dest) {
     if (!destroyed) {
       update.call(this);
@@ -2110,21 +2109,30 @@ const TRIGGER_KEYS = [" ", "Enter", "Spacebar"];
 function Sync(Splide2, Components2, options) {
   const { splides } = Splide2;
   const { list } = Components2.Elements;
+  const events = [];
   function mount() {
     if (options.isNavigation) {
       navigate();
     } else {
-      sync();
+      splides.length && sync();
     }
   }
   function destroy() {
     removeAttribute(list, ALL_ATTRIBUTES);
+    events.forEach((event) => {
+      event.destroy();
+    });
+    empty(events);
+  }
+  function remount() {
+    destroy();
+    mount();
   }
   function sync() {
     const processed = [];
     splides.concat(Splide2).forEach((splide, index, instances) => {
-      const { on } = EventInterface(splide);
-      on(EVENT_MOVE, (index2, prev, dest) => {
+      const event = EventInterface(splide);
+      event.on(EVENT_MOVE, (index2, prev, dest) => {
         instances.forEach((instance) => {
           if (instance !== splide && !includes(processed, splide)) {
             processed.push(instance);
@@ -2134,15 +2142,18 @@ function Sync(Splide2, Components2, options) {
         });
         empty(processed);
       });
+      events.push(event);
     });
   }
   function navigate() {
-    const { on, emit } = EventInterface(Splide2);
+    const event = EventInterface(Splide2);
+    const { on } = event;
     on(EVENT_CLICK, onClick);
     on(EVENT_SLIDE_KEYDOWN, onKeydown);
     on([EVENT_MOUNTED, EVENT_UPDATED], update);
     setAttribute(list, ROLE, "menu");
-    emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
+    events.push(event);
+    event.emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
   }
   function update() {
     setAttribute(list, ARIA_ORIENTATION, options.direction !== TTB ? "horizontal" : null);
@@ -2158,7 +2169,8 @@ function Sync(Splide2, Components2, options) {
   }
   return {
     mount,
-    destroy
+    destroy,
+    remount
   };
 }
 
@@ -2348,6 +2360,10 @@ const _Splide = class {
   sync(splide) {
     this.splides.push(splide);
     splide.splides.push(this);
+    if (this.state.is(IDLE)) {
+      this._Components.Sync.remount();
+      splide.Components.Sync.remount();
+    }
     return this;
   }
   go(control) {

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 3.2.6
+ * Version  : 3.2.7
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -882,34 +882,21 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     function mount() {
       var _this2 = this;
 
-      init();
+      if (!isClone) {
+        slide.id = root.id + "-slide" + pad(index + 1);
+      }
+
       bind(slide, "click keydown", function (e) {
         emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, _this2, e);
       });
       on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], update.bind(this));
+      on(EVENT_NAVIGATION_MOUNTED, initNavigation.bind(this));
 
       if (updateOnMove) {
         on(EVENT_MOVE, onMove.bind(this));
       }
     }
 
-    function init() {
-      if (!isClone) {
-        slide.id = root.id + "-slide" + pad(index + 1);
-      }
-
-      if (isNavigation) {
-        var idx = isClone ? slideIndex : index;
-        var label = format(options.i18n.slideX, idx + 1);
-        var controls = Splide2.splides.map(function (splide) {
-          return splide.root.id;
-        }).join(" ");
-        setAttribute(slide, ARIA_LABEL, label);
-        setAttribute(slide, ARIA_CONTROLS, controls);
-        setAttribute(slide, ROLE, "menuitem");
-      }
-    }
-
     function destroy() {
       destroyed = true;
       destroyEvents();
@@ -918,6 +905,18 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       setAttribute(slide, "style", styles);
     }
 
+    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;
+      }).join(" ");
+      setAttribute(slide, ARIA_LABEL, label);
+      setAttribute(slide, ARIA_CONTROLS, controls);
+      setAttribute(slide, ROLE, "menuitem");
+      updateActivity.call(this, isActive());
+    }
+
     function onMove(next, prev, dest) {
       if (!destroyed) {
         update.call(this);
@@ -2591,26 +2590,34 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   function Sync(Splide2, Components2, options) {
     var splides = Splide2.splides;
     var list = Components2.Elements.list;
+    var events = [];
 
     function mount() {
       if (options.isNavigation) {
         navigate();
       } else {
-        sync();
+        splides.length && sync();
       }
     }
 
     function destroy() {
       removeAttribute(list, ALL_ATTRIBUTES);
+      events.forEach(function (event) {
+        event.destroy();
+      });
+      empty(events);
+    }
+
+    function remount() {
+      destroy();
+      mount();
     }
 
     function sync() {
       var processed = [];
       splides.concat(Splide2).forEach(function (splide, index, instances) {
-        var _EventInterface16 = EventInterface(splide),
-            on = _EventInterface16.on;
-
-        on(EVENT_MOVE, function (index2, prev, dest) {
+        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);
@@ -2620,19 +2627,19 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
           });
           empty(processed);
         });
+        events.push(event);
       });
     }
 
     function navigate() {
-      var _EventInterface17 = EventInterface(Splide2),
-          on = _EventInterface17.on,
-          emit = _EventInterface17.emit;
-
+      var event = EventInterface(Splide2);
+      var on = event.on;
       on(EVENT_CLICK, onClick);
       on(EVENT_SLIDE_KEYDOWN, onKeydown);
       on([EVENT_MOUNTED, EVENT_UPDATED], update);
       setAttribute(list, ROLE, "menu");
-      emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
+      events.push(event);
+      event.emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
     }
 
     function update() {
@@ -2652,13 +2659,14 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     return {
       mount: mount,
-      destroy: destroy
+      destroy: destroy,
+      remount: remount
     };
   }
 
   function Wheel(Splide2, Components2, options) {
-    var _EventInterface18 = EventInterface(Splide2),
-        bind = _EventInterface18.bind;
+    var _EventInterface16 = EventInterface(Splide2),
+        bind = _EventInterface16.bind;
 
     function mount() {
       if (options.wheel) {
@@ -2736,8 +2744,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   };
 
   function Fade(Splide2, Components2, options) {
-    var _EventInterface19 = EventInterface(Splide2),
-        on = _EventInterface19.on;
+    var _EventInterface17 = EventInterface(Splide2),
+        on = _EventInterface17.on;
 
     function mount() {
       on([EVENT_MOUNTED, EVENT_REFRESH], function () {
@@ -2764,8 +2772,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function Slide(Splide2, Components2, options) {
-    var _EventInterface20 = EventInterface(Splide2),
-        bind = _EventInterface20.bind;
+    var _EventInterface18 = EventInterface(Splide2),
+        bind = _EventInterface18.bind;
 
     var Move = Components2.Move,
         Controller = Components2.Controller;
@@ -2874,6 +2882,13 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     _proto.sync = function sync(splide) {
       this.splides.push(splide);
       splide.splides.push(this);
+
+      if (this.state.is(IDLE)) {
+        this._Components.Sync.remount();
+
+        splide.Components.Sync.remount();
+      }
+
       return this;
     };
 

dist/types/components/Slides/Slide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slide.d.ts","sourceRoot":"","sources":["Slide.ts"],"names":[],"mappings":"AAgCA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAqB5C;;;;GAIG;AACH,MAAM,WAAY,cAAe,SAAQ,aAAa;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,GAAI,IAAI,CAAA;IAC3E,QAAQ,CAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAI,OAAO,CAAC;CACrD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAI,cAAc,CAyM7G"}
+{"version":3,"file":"Slide.d.ts","sourceRoot":"","sources":["Slide.ts"],"names":[],"mappings":"AAgCA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAqB5C;;;;GAIG;AACH,MAAM,WAAY,cAAe,SAAQ,aAAa;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,GAAI,IAAI,CAAA;IAC3E,QAAQ,CAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAI,OAAO,CAAC;CACrD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAI,cAAc,CAwM7G"}

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

@@ -6,6 +6,7 @@ import { BaseComponent, Components, Options } from '../../types';
  * @since 3.0.0
  */
 export interface SyncComponent extends BaseComponent {
+    remount(): void;
 }
 /**
  * The component for syncing multiple sliders.

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;CACnD;AASD;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CA+F9F"}
+{"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"}

package.json

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

src/js/components/Slides/Slide.ts

@@ -21,7 +21,7 @@ import {
   EVENT_HIDDEN,
   EVENT_INACTIVE,
   EVENT_MOVE,
-  EVENT_MOVED,
+  EVENT_MOVED, EVENT_NAVIGATION_MOUNTED,
   EVENT_REFRESH,
   EVENT_REPOSITIONED,
   EVENT_SCROLLED,
@@ -98,38 +98,22 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
    * Called when the component is mounted.
    */
   function mount( this: SlideComponent ): void {
-    init();
+    if ( ! isClone ) {
+      slide.id = `${ root.id }-slide${ pad( index + 1 ) }`;
+    }
 
     bind( slide, 'click keydown', e => {
       emit( e.type === 'click' ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, this, e );
     } );
 
     on( [ EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED ], update.bind( this ) );
+    on( EVENT_NAVIGATION_MOUNTED, initNavigation.bind( this ) );
 
     if ( updateOnMove ) {
       on( EVENT_MOVE, onMove.bind( this ) );
     }
   }
 
-  /**
-   * Initializes the component.
-   */
-  function init(): void {
-    if ( ! isClone ) {
-      slide.id = `${ root.id }-slide${ pad( index + 1 ) }`;
-    }
-
-    if ( isNavigation ) {
-      const idx      = isClone ? slideIndex : index;
-      const label    = format( options.i18n.slideX, idx + 1 );
-      const controls = Splide.splides.map( splide => splide.root.id ).join( ' ' );
-
-      setAttribute( slide, ARIA_LABEL, label );
-      setAttribute( slide, ARIA_CONTROLS, controls );
-      setAttribute( slide, ROLE, 'menuitem' );
-    }
-  }
-
   /**
    * Destroys the component.
    */
@@ -141,6 +125,21 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
     setAttribute( slide, 'style', styles );
   }
 
+  /**
+   * Initializes slides as navigation.
+   */
+  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( ' ' );
+
+    setAttribute( slide, ARIA_LABEL, label );
+    setAttribute( slide, ARIA_CONTROLS, controls );
+    setAttribute( slide, ROLE, 'menuitem' );
+
+    updateActivity.call( this, isActive() );
+  }
+
   /**
    * If the `updateOnMove` option is `true`, called when the slider starts moving.
    *

src/js/components/Sync/Sync.ts

@@ -9,7 +9,7 @@ import {
   EVENT_UPDATED,
 } from '../../constants/events';
 import { LOOP } from '../../constants/types';
-import { EventInterface } from '../../constructors';
+import { EventInterface, EventInterfaceObject } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
 import { empty, includes, prevent, removeAttribute, setAttribute } from '../../utils';
@@ -22,6 +22,7 @@ import { SlideComponent } from '../Slides/Slide';
  * @since 3.0.0
  */
 export interface SyncComponent extends BaseComponent {
+  remount(): void;
 }
 
 /**
@@ -45,6 +46,7 @@ const TRIGGER_KEYS = [ ' ', 'Enter', 'Spacebar' ];
 export function Sync( Splide: Splide, Components: Components, options: Options ): SyncComponent {
   const { splides } = Splide;
   const { list } = Components.Elements;
+  const events: EventInterfaceObject[] = [];
 
   /**
    * Called when the component is mounted.
@@ -53,7 +55,7 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
     if ( options.isNavigation ) {
       navigate();
     } else {
-      sync();
+      splides.length && sync();
     }
   }
 
@@ -62,6 +64,18 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
    */
   function destroy(): void {
     removeAttribute( list, ALL_ATTRIBUTES );
+    events.forEach( event => { event.destroy() } );
+    empty( events );
+  }
+
+  /**
+   * Remounts the component.
+   *
+   * @internal
+   */
+  function remount(): void {
+    destroy();
+    mount();
   }
 
   /**
@@ -72,9 +86,9 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
     const processed: Splide[] = [];
 
     splides.concat( Splide ).forEach( ( splide, index, instances ) => {
-      const { on } = EventInterface( splide );
+      const event = EventInterface( splide );
 
-      on( EVENT_MOVE, ( index, prev, dest ) => {
+      event.on( EVENT_MOVE, ( index, prev, dest ) => {
         instances.forEach( instance => {
           if ( instance !== splide && ! includes( processed, splide ) ) {
             processed.push( instance );
@@ -85,6 +99,8 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
 
         empty( processed );
       } );
+
+      events.push( event );
     } );
   }
 
@@ -93,15 +109,16 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
    * Note that the direction of `menu` is implicitly `vertical` as default.
    */
   function navigate(): void {
-    const { on, emit } = EventInterface( Splide );
+    const event = EventInterface( Splide );
+    const { on } = event;
 
     on( EVENT_CLICK, onClick );
     on( EVENT_SLIDE_KEYDOWN, onKeydown );
     on( [ EVENT_MOUNTED, EVENT_UPDATED ], update );
 
     setAttribute( list, ROLE, 'menu' );
-
-    emit( EVENT_NAVIGATION_MOUNTED, Splide.splides );
+    events.push( event );
+    event.emit( EVENT_NAVIGATION_MOUNTED, Splide.splides );
   }
 
   /**
@@ -136,5 +153,6 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
   return {
     mount,
     destroy,
+    remount,
   };
 }

src/js/components/Sync/test/sync.test.ts

@@ -31,6 +31,23 @@ describe( 'Sync#sync()', () => {
     expect( secondary.index ).toBe( 5 );
   } );
 
+  test( 'can sync Splide sliders after mount.', () => {
+    const primary   = init( { speed: 0 }, { id: 'primary', mount: false } );
+    const secondary = init( { speed: 0 }, { id: 'secondary', insertHtml: true, mount: false } );
+
+    primary.mount();
+    secondary.mount();
+    primary.sync( secondary );
+
+    primary.go( 1 );
+    expect( primary.index ).toBe( 1 );
+    expect( secondary.index ).toBe( 1 );
+
+    primary.go( 4 );
+    expect( primary.index ).toBe( 4 );
+    expect( secondary.index ).toBe( 4 );
+  } );
+
   test( 'can sync multiple Splide sliders.', () => {
     const primary = init( { speed: 0 }, { id: 'primary', mount: false } );
     const splides: Splide[] = [];

src/js/core/Splide/Splide.ts

@@ -150,6 +150,12 @@ export class Splide {
   sync( splide: Splide ): this {
     this.splides.push( splide );
     splide.splides.push( this );
+
+    if ( this.state.is( IDLE ) ) {
+      this._Components.Sync.remount();
+      splide.Components.Sync.remount();
+    }
+
     return this;
   }
 

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

@@ -59,10 +59,14 @@ $settings = get_settings();
       } );
 
       splide01.sync( splide02 );
-      splide01.sync( splide03 );
+      // splide01.sync( splide03 );
+
       splide01.mount();
       splide02.mount();
       splide03.mount();
+
+      // Attempts to sync after mount.
+      splide01.sync( splide03 );
     } );
   </script>
 </head>