Bug Fix: Clones were unexpectedly duplicated on refresh.

dist/js/splide-renderer.min.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 4.0.19
+ * Version  : 4.0.20
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 4.0.19
+ * Version  : 4.0.20
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -1323,10 +1323,9 @@ function Layout(Splide2, Components2, options) {
 var MULTIPLIER = 2;
 
 function Clones(Splide2, Components2, options) {
-  var _EventInterface4 = EventInterface(Splide2),
-      on = _EventInterface4.on,
-      emit = _EventInterface4.emit;
-
+  var event = EventInterface(Splide2);
+  var on = event.on,
+      emit = event.emit;
   var Elements = Components2.Elements,
       Slides = Components2.Slides;
   var resolve = Components2.Direction.resolve;
@@ -1334,22 +1333,24 @@ function Clones(Splide2, Components2, options) {
   var cloneCount;
 
   function mount() {
-    init();
-    on(EVENT_REFRESH, destroy);
-    on(EVENT_REFRESH, init);
+    on(EVENT_REFRESH, remount);
     on([EVENT_UPDATED, EVENT_RESIZE], observe);
-  }
 
-  function init() {
     if (cloneCount = computeCloneCount()) {
       generate(cloneCount);
       emit(EVENT_RESIZE);
     }
   }
 
+  function remount() {
+    destroy();
+    mount();
+  }
+
   function destroy() {
     remove(clones);
     empty(clones);
+    event.destroy();
   }
 
   function observe() {
@@ -1409,9 +1410,9 @@ function Clones(Splide2, Components2, options) {
 }
 
 function Move(Splide2, Components2, options) {
-  var _EventInterface5 = EventInterface(Splide2),
-      on = _EventInterface5.on,
-      emit = _EventInterface5.emit;
+  var _EventInterface4 = EventInterface(Splide2),
+      on = _EventInterface4.on,
+      emit = _EventInterface4.emit;
 
   var set = Splide2.state.set;
   var _Components2$Layout = Components2.Layout,
@@ -1570,9 +1571,9 @@ function Move(Splide2, Components2, options) {
 }
 
 function Controller(Splide2, Components2, options) {
-  var _EventInterface6 = EventInterface(Splide2),
-      on = _EventInterface6.on,
-      emit = _EventInterface6.emit;
+  var _EventInterface5 = EventInterface(Splide2),
+      on = _EventInterface5.on,
+      emit = _EventInterface5.emit;
 
   var Move = Components2.Move;
   var getPosition = Move.getPosition,
@@ -1902,10 +1903,10 @@ function Arrows(Splide2, Components2, options) {
 var INTERVAL_DATA_ATTRIBUTE = DATA_ATTRIBUTE + "-interval";
 
 function Autoplay(Splide2, Components2, options) {
-  var _EventInterface7 = EventInterface(Splide2),
-      on = _EventInterface7.on,
-      bind = _EventInterface7.bind,
-      emit = _EventInterface7.emit;
+  var _EventInterface6 = EventInterface(Splide2),
+      on = _EventInterface6.on,
+      bind = _EventInterface6.bind,
+      emit = _EventInterface6.emit;
 
   var interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), onAnimationFrame);
   var isPaused = interval.isPaused;
@@ -2009,8 +2010,8 @@ function Autoplay(Splide2, Components2, options) {
 }
 
 function Cover(Splide2, Components2, options) {
-  var _EventInterface8 = EventInterface(Splide2),
-      on = _EventInterface8.on;
+  var _EventInterface7 = EventInterface(Splide2),
+      on = _EventInterface7.on;
 
   function mount() {
     if (options.cover) {
@@ -2047,9 +2048,9 @@ var BASE_VELOCITY = 1.5;
 var MIN_DURATION = 800;
 
 function Scroll(Splide2, Components2, options) {
-  var _EventInterface9 = EventInterface(Splide2),
-      on = _EventInterface9.on,
-      emit = _EventInterface9.emit;
+  var _EventInterface8 = EventInterface(Splide2),
+      on = _EventInterface8.on,
+      emit = _EventInterface8.emit;
 
   var set = Splide2.state.set;
   var Move = Components2.Move;
@@ -2140,11 +2141,11 @@ var SCROLL_LISTENER_OPTIONS = {
 };
 
 function Drag(Splide2, Components2, options) {
-  var _EventInterface10 = EventInterface(Splide2),
-      on = _EventInterface10.on,
-      emit = _EventInterface10.emit,
-      bind = _EventInterface10.bind,
-      unbind = _EventInterface10.unbind;
+  var _EventInterface9 = EventInterface(Splide2),
+      on = _EventInterface9.on,
+      emit = _EventInterface9.emit,
+      bind = _EventInterface9.bind,
+      unbind = _EventInterface9.unbind;
 
   var state = Splide2.state;
   var Move = Components2.Move,
@@ -2368,10 +2369,10 @@ function normalizeKey(key) {
 var KEYBOARD_EVENT = "keydown";
 
 function Keyboard(Splide2, Components2, options) {
-  var _EventInterface11 = EventInterface(Splide2),
-      on = _EventInterface11.on,
-      bind = _EventInterface11.bind,
-      unbind = _EventInterface11.unbind;
+  var _EventInterface10 = EventInterface(Splide2),
+      on = _EventInterface10.on,
+      bind = _EventInterface10.bind,
+      unbind = _EventInterface10.unbind;
 
   var root = Splide2.root;
   var resolve = Components2.Direction.resolve;
@@ -2434,11 +2435,11 @@ var SRCSET_DATA_ATTRIBUTE = SRC_DATA_ATTRIBUTE + "-srcset";
 var IMAGE_SELECTOR = "[" + SRC_DATA_ATTRIBUTE + "], [" + SRCSET_DATA_ATTRIBUTE + "]";
 
 function LazyLoad(Splide2, Components2, options) {
-  var _EventInterface12 = EventInterface(Splide2),
-      on = _EventInterface12.on,
-      off = _EventInterface12.off,
-      bind = _EventInterface12.bind,
-      emit = _EventInterface12.emit;
+  var _EventInterface11 = EventInterface(Splide2),
+      on = _EventInterface11.on,
+      off = _EventInterface11.off,
+      bind = _EventInterface11.bind,
+      emit = _EventInterface11.emit;
 
   var isSequential = options.lazyLoad === "sequential";
   var events = [EVENT_MOVED, EVENT_SCROLLED];
@@ -2761,8 +2762,8 @@ function Sync(Splide2, Components2, options) {
 }
 
 function Wheel(Splide2, Components2, options) {
-  var _EventInterface13 = EventInterface(Splide2),
-      bind = _EventInterface13.bind;
+  var _EventInterface12 = EventInterface(Splide2),
+      bind = _EventInterface12.bind;
 
   var lastTime = 0;
 
@@ -2803,8 +2804,8 @@ function Wheel(Splide2, Components2, options) {
 var SR_REMOVAL_DELAY = 90;
 
 function Live(Splide2, Components2, options) {
-  var _EventInterface14 = EventInterface(Splide2),
-      on = _EventInterface14.on;
+  var _EventInterface13 = EventInterface(Splide2),
+      on = _EventInterface13.on;
 
   var track = Components2.Elements.track;
   var enabled = options.live && !options.isNavigation;
@@ -3250,8 +3251,8 @@ var SplideRenderer = /*#__PURE__*/function () {
   }
 
   SplideRenderer.clean = function clean(splide) {
-    var _EventInterface15 = EventInterface(splide),
-        on = _EventInterface15.on;
+    var _EventInterface14 = EventInterface(splide),
+        on = _EventInterface14.on;
 
     var root = splide.root;
     var clones = queryAll(root, "." + CLASS_CLONE);

dist/js/splide.esm.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 4.0.19
+ * Version  : 4.0.20
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -1318,10 +1318,9 @@ function Layout(Splide2, Components2, options) {
 var MULTIPLIER = 2;
 
 function Clones(Splide2, Components2, options) {
-  var _EventInterface4 = EventInterface(Splide2),
-      on = _EventInterface4.on,
-      emit = _EventInterface4.emit;
-
+  var event = EventInterface(Splide2);
+  var on = event.on,
+      emit = event.emit;
   var Elements = Components2.Elements,
       Slides = Components2.Slides;
   var resolve = Components2.Direction.resolve;
@@ -1329,22 +1328,24 @@ function Clones(Splide2, Components2, options) {
   var cloneCount;
 
   function mount() {
-    init();
-    on(EVENT_REFRESH, destroy);
-    on(EVENT_REFRESH, init);
+    on(EVENT_REFRESH, remount);
     on([EVENT_UPDATED, EVENT_RESIZE], observe);
-  }
 
-  function init() {
     if (cloneCount = computeCloneCount()) {
       generate(cloneCount);
       emit(EVENT_RESIZE);
     }
   }
 
+  function remount() {
+    destroy();
+    mount();
+  }
+
   function destroy() {
     remove(clones);
     empty(clones);
+    event.destroy();
   }
 
   function observe() {
@@ -1404,9 +1405,9 @@ function Clones(Splide2, Components2, options) {
 }
 
 function Move(Splide2, Components2, options) {
-  var _EventInterface5 = EventInterface(Splide2),
-      on = _EventInterface5.on,
-      emit = _EventInterface5.emit;
+  var _EventInterface4 = EventInterface(Splide2),
+      on = _EventInterface4.on,
+      emit = _EventInterface4.emit;
 
   var set = Splide2.state.set;
   var _Components2$Layout = Components2.Layout,
@@ -1565,9 +1566,9 @@ function Move(Splide2, Components2, options) {
 }
 
 function Controller(Splide2, Components2, options) {
-  var _EventInterface6 = EventInterface(Splide2),
-      on = _EventInterface6.on,
-      emit = _EventInterface6.emit;
+  var _EventInterface5 = EventInterface(Splide2),
+      on = _EventInterface5.on,
+      emit = _EventInterface5.emit;
 
   var Move = Components2.Move;
   var getPosition = Move.getPosition,
@@ -1897,10 +1898,10 @@ function Arrows(Splide2, Components2, options) {
 var INTERVAL_DATA_ATTRIBUTE = DATA_ATTRIBUTE + "-interval";
 
 function Autoplay(Splide2, Components2, options) {
-  var _EventInterface7 = EventInterface(Splide2),
-      on = _EventInterface7.on,
-      bind = _EventInterface7.bind,
-      emit = _EventInterface7.emit;
+  var _EventInterface6 = EventInterface(Splide2),
+      on = _EventInterface6.on,
+      bind = _EventInterface6.bind,
+      emit = _EventInterface6.emit;
 
   var interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), onAnimationFrame);
   var isPaused = interval.isPaused;
@@ -2004,8 +2005,8 @@ function Autoplay(Splide2, Components2, options) {
 }
 
 function Cover(Splide2, Components2, options) {
-  var _EventInterface8 = EventInterface(Splide2),
-      on = _EventInterface8.on;
+  var _EventInterface7 = EventInterface(Splide2),
+      on = _EventInterface7.on;
 
   function mount() {
     if (options.cover) {
@@ -2042,9 +2043,9 @@ var BASE_VELOCITY = 1.5;
 var MIN_DURATION = 800;
 
 function Scroll(Splide2, Components2, options) {
-  var _EventInterface9 = EventInterface(Splide2),
-      on = _EventInterface9.on,
-      emit = _EventInterface9.emit;
+  var _EventInterface8 = EventInterface(Splide2),
+      on = _EventInterface8.on,
+      emit = _EventInterface8.emit;
 
   var set = Splide2.state.set;
   var Move = Components2.Move;
@@ -2135,11 +2136,11 @@ var SCROLL_LISTENER_OPTIONS = {
 };
 
 function Drag(Splide2, Components2, options) {
-  var _EventInterface10 = EventInterface(Splide2),
-      on = _EventInterface10.on,
-      emit = _EventInterface10.emit,
-      bind = _EventInterface10.bind,
-      unbind = _EventInterface10.unbind;
+  var _EventInterface9 = EventInterface(Splide2),
+      on = _EventInterface9.on,
+      emit = _EventInterface9.emit,
+      bind = _EventInterface9.bind,
+      unbind = _EventInterface9.unbind;
 
   var state = Splide2.state;
   var Move = Components2.Move,
@@ -2363,10 +2364,10 @@ function normalizeKey(key) {
 var KEYBOARD_EVENT = "keydown";
 
 function Keyboard(Splide2, Components2, options) {
-  var _EventInterface11 = EventInterface(Splide2),
-      on = _EventInterface11.on,
-      bind = _EventInterface11.bind,
-      unbind = _EventInterface11.unbind;
+  var _EventInterface10 = EventInterface(Splide2),
+      on = _EventInterface10.on,
+      bind = _EventInterface10.bind,
+      unbind = _EventInterface10.unbind;
 
   var root = Splide2.root;
   var resolve = Components2.Direction.resolve;
@@ -2429,11 +2430,11 @@ var SRCSET_DATA_ATTRIBUTE = SRC_DATA_ATTRIBUTE + "-srcset";
 var IMAGE_SELECTOR = "[" + SRC_DATA_ATTRIBUTE + "], [" + SRCSET_DATA_ATTRIBUTE + "]";
 
 function LazyLoad(Splide2, Components2, options) {
-  var _EventInterface12 = EventInterface(Splide2),
-      on = _EventInterface12.on,
-      off = _EventInterface12.off,
-      bind = _EventInterface12.bind,
-      emit = _EventInterface12.emit;
+  var _EventInterface11 = EventInterface(Splide2),
+      on = _EventInterface11.on,
+      off = _EventInterface11.off,
+      bind = _EventInterface11.bind,
+      emit = _EventInterface11.emit;
 
   var isSequential = options.lazyLoad === "sequential";
   var events = [EVENT_MOVED, EVENT_SCROLLED];
@@ -2756,8 +2757,8 @@ function Sync(Splide2, Components2, options) {
 }
 
 function Wheel(Splide2, Components2, options) {
-  var _EventInterface13 = EventInterface(Splide2),
-      bind = _EventInterface13.bind;
+  var _EventInterface12 = EventInterface(Splide2),
+      bind = _EventInterface12.bind;
 
   var lastTime = 0;
 
@@ -2798,8 +2799,8 @@ function Wheel(Splide2, Components2, options) {
 var SR_REMOVAL_DELAY = 90;
 
 function Live(Splide2, Components2, options) {
-  var _EventInterface14 = EventInterface(Splide2),
-      on = _EventInterface14.on;
+  var _EventInterface13 = EventInterface(Splide2),
+      on = _EventInterface13.on;
 
   var track = Components2.Elements.track;
   var enabled = options.live && !options.isNavigation;
@@ -3245,8 +3246,8 @@ var SplideRenderer = /*#__PURE__*/function () {
   }
 
   SplideRenderer.clean = function clean(splide) {
-    var _EventInterface15 = EventInterface(splide),
-        on = _EventInterface15.on;
+    var _EventInterface14 = EventInterface(splide),
+        on = _EventInterface14.on;
 
     var root = splide.root;
     var clones = queryAll(root, "." + CLASS_CLONE);

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 4.0.19
+ * Version  : 4.0.20
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -1316,10 +1316,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var MULTIPLIER = 2;
 
   function Clones(Splide2, Components2, options) {
-    var _EventInterface4 = EventInterface(Splide2),
-        on = _EventInterface4.on,
-        emit = _EventInterface4.emit;
-
+    var event = EventInterface(Splide2);
+    var on = event.on,
+        emit = event.emit;
     var Elements = Components2.Elements,
         Slides = Components2.Slides;
     var resolve = Components2.Direction.resolve;
@@ -1327,22 +1326,24 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var cloneCount;
 
     function mount() {
-      init();
-      on(EVENT_REFRESH, destroy);
-      on(EVENT_REFRESH, init);
+      on(EVENT_REFRESH, remount);
       on([EVENT_UPDATED, EVENT_RESIZE], observe);
-    }
 
-    function init() {
       if (cloneCount = computeCloneCount()) {
         generate(cloneCount);
         emit(EVENT_RESIZE);
       }
     }
 
+    function remount() {
+      destroy();
+      mount();
+    }
+
     function destroy() {
       remove(clones);
       empty(clones);
+      event.destroy();
     }
 
     function observe() {
@@ -1402,9 +1403,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function Move(Splide2, Components2, options) {
-    var _EventInterface5 = EventInterface(Splide2),
-        on = _EventInterface5.on,
-        emit = _EventInterface5.emit;
+    var _EventInterface4 = EventInterface(Splide2),
+        on = _EventInterface4.on,
+        emit = _EventInterface4.emit;
 
     var set = Splide2.state.set;
     var _Components2$Layout = Components2.Layout,
@@ -1563,9 +1564,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function Controller(Splide2, Components2, options) {
-    var _EventInterface6 = EventInterface(Splide2),
-        on = _EventInterface6.on,
-        emit = _EventInterface6.emit;
+    var _EventInterface5 = EventInterface(Splide2),
+        on = _EventInterface5.on,
+        emit = _EventInterface5.emit;
 
     var Move = Components2.Move;
     var getPosition = Move.getPosition,
@@ -1895,10 +1896,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var INTERVAL_DATA_ATTRIBUTE = DATA_ATTRIBUTE + "-interval";
 
   function Autoplay(Splide2, Components2, options) {
-    var _EventInterface7 = EventInterface(Splide2),
-        on = _EventInterface7.on,
-        bind = _EventInterface7.bind,
-        emit = _EventInterface7.emit;
+    var _EventInterface6 = EventInterface(Splide2),
+        on = _EventInterface6.on,
+        bind = _EventInterface6.bind,
+        emit = _EventInterface6.emit;
 
     var interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), onAnimationFrame);
     var isPaused = interval.isPaused;
@@ -2002,8 +2003,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function Cover(Splide2, Components2, options) {
-    var _EventInterface8 = EventInterface(Splide2),
-        on = _EventInterface8.on;
+    var _EventInterface7 = EventInterface(Splide2),
+        on = _EventInterface7.on;
 
     function mount() {
       if (options.cover) {
@@ -2040,9 +2041,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var MIN_DURATION = 800;
 
   function Scroll(Splide2, Components2, options) {
-    var _EventInterface9 = EventInterface(Splide2),
-        on = _EventInterface9.on,
-        emit = _EventInterface9.emit;
+    var _EventInterface8 = EventInterface(Splide2),
+        on = _EventInterface8.on,
+        emit = _EventInterface8.emit;
 
     var set = Splide2.state.set;
     var Move = Components2.Move;
@@ -2133,11 +2134,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   };
 
   function Drag(Splide2, Components2, options) {
-    var _EventInterface10 = EventInterface(Splide2),
-        on = _EventInterface10.on,
-        emit = _EventInterface10.emit,
-        bind = _EventInterface10.bind,
-        unbind = _EventInterface10.unbind;
+    var _EventInterface9 = EventInterface(Splide2),
+        on = _EventInterface9.on,
+        emit = _EventInterface9.emit,
+        bind = _EventInterface9.bind,
+        unbind = _EventInterface9.unbind;
 
     var state = Splide2.state;
     var Move = Components2.Move,
@@ -2361,10 +2362,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var KEYBOARD_EVENT = "keydown";
 
   function Keyboard(Splide2, Components2, options) {
-    var _EventInterface11 = EventInterface(Splide2),
-        on = _EventInterface11.on,
-        bind = _EventInterface11.bind,
-        unbind = _EventInterface11.unbind;
+    var _EventInterface10 = EventInterface(Splide2),
+        on = _EventInterface10.on,
+        bind = _EventInterface10.bind,
+        unbind = _EventInterface10.unbind;
 
     var root = Splide2.root;
     var resolve = Components2.Direction.resolve;
@@ -2427,11 +2428,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var IMAGE_SELECTOR = "[" + SRC_DATA_ATTRIBUTE + "], [" + SRCSET_DATA_ATTRIBUTE + "]";
 
   function LazyLoad(Splide2, Components2, options) {
-    var _EventInterface12 = EventInterface(Splide2),
-        on = _EventInterface12.on,
-        off = _EventInterface12.off,
-        bind = _EventInterface12.bind,
-        emit = _EventInterface12.emit;
+    var _EventInterface11 = EventInterface(Splide2),
+        on = _EventInterface11.on,
+        off = _EventInterface11.off,
+        bind = _EventInterface11.bind,
+        emit = _EventInterface11.emit;
 
     var isSequential = options.lazyLoad === "sequential";
     var events = [EVENT_MOVED, EVENT_SCROLLED];
@@ -2754,8 +2755,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   }
 
   function Wheel(Splide2, Components2, options) {
-    var _EventInterface13 = EventInterface(Splide2),
-        bind = _EventInterface13.bind;
+    var _EventInterface12 = EventInterface(Splide2),
+        bind = _EventInterface12.bind;
 
     var lastTime = 0;
 
@@ -2796,8 +2797,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var SR_REMOVAL_DELAY = 90;
 
   function Live(Splide2, Components2, options) {
-    var _EventInterface14 = EventInterface(Splide2),
-        on = _EventInterface14.on;
+    var _EventInterface13 = EventInterface(Splide2),
+        on = _EventInterface13.on;
 
     var track = Components2.Elements.track;
     var enabled = options.live && !options.isNavigation;

package.json

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

src/css/core/object/modifiers/fade.scss

@@ -4,9 +4,9 @@
   &__track--fade {
     > #{ $root }__list {
       > #{ $root }__slide {
+        margin: 0 !important;
         opacity: 0;
         z-index: 0;
-        margin: 0 !important;
 
         &.is-active {
           opacity: 1;

src/js/components/Clones/Clones.ts

@@ -33,7 +33,8 @@ export const MULTIPLIER = 2;
  * @return A Clones component object.
  */
 export function Clones( Splide: Splide, Components: Components, options: Options ): ClonesComponent {
-  const { on, emit } = EventInterface( Splide );
+  const event = EventInterface( Splide );
+  const { on, emit } = event;
   const { Elements, Slides } = Components;
   const { resolve } = Components.Direction;
 
@@ -49,30 +50,33 @@ export function Clones( Splide: Splide, Components: Components, options: Options
 
   /**
    * Called when the component is mounted.
+   * Needs to remount the component on refresh, otherwise `refresh` event will be triggered again while refreshing.
    */
   function mount(): void {
-    init();
-    on( EVENT_REFRESH, destroy );
-    on( EVENT_REFRESH, init );
+    on( EVENT_REFRESH, remount );
     on( [ EVENT_UPDATED, EVENT_RESIZE ], observe );
-  }
 
-  /**
-   * Removes all clones if available, and generates new clones.
-   */
-  function init(): void {
     if ( ( cloneCount = computeCloneCount() ) ) {
       generate( cloneCount );
       emit( EVENT_RESIZE );
     }
   }
 
+  /**
+   * Remounts the component.
+   */
+  function remount(): void {
+    destroy();
+    mount();
+  }
+
   /**
    * Destroys clones.
    */
   function destroy(): void {
     remove( clones );
     empty( clones );
+    event.destroy();
   }
 
   /**

src/js/test/php/examples/add.php

@@ -37,8 +37,8 @@ $settings = get_settings();
 
   add.addEventListener( 'click', function() {
     splide.add( [
-      '<img src="../../assets/images/pics/slide15.jpg">',
-      '<img src="../../assets/images/pics/slide16.jpg">',
+      '<li class="splide__slide"><img src="../../assets/images/pics/slide15.jpg"></li>',
+      '<li class="splide__slide"><img src="../../assets/images/pics/slide16.jpg"></li>',
     ] );
   } );
 

src/js/test/php/examples/overflow.php

@@ -26,44 +26,92 @@ $settings = get_settings();
       } );
 
       splide01.on( 'overflow', overflow => {
-        if ( overflow ) {
-          console.log( 'splide01: overflow' );
-          splide01.root.classList.add( 'is-overflow' );
-          splide01.options = { arrows: true, pagination: true, drag: true };
-        } else {
-          console.log( 'splide01: not overflow' );
-          splide01.root.classList.remove( 'is-overflow' );
-          splide01.options = { arrows: false, pagination: false, drag: false };
-        }
+        console.log( 'splide01:', overflow );
+        splide01.root.classList.toggle( 'is-inactive', ! overflow );
+        splide01.options = { arrows: overflow, pagination: overflow, drag: overflow };
       } );
 
       splide01.mount();
 
       var splide02 = new Splide( '#splide02', {
         type      : 'loop',
-        // gap       : '1rem',
+        gap       : '1rem',
         fixedWidth: 100,
       } );
 
       splide02.on( 'overflow', overflow => {
+        console.log( 'splide02:', overflow );
+        splide02.root.classList.toggle( 'is-inactive', ! overflow );
+
         if ( overflow ) {
-          console.log( 'splide02: overflow' );
-          splide02.root.classList.add( 'is-overflow' );
           splide02.options = { clones: undefined, arrows: true, pagination: true, drag: true };
         } else {
-          console.log( 'splide02: not overflow' );
           splide02.go( 0 );
-          splide02.root.classList.remove( 'is-overflow' );
           splide02.options = { clones: 0, arrows: false, pagination: false, drag: false };
         }
       } );
 
       splide02.mount();
+
+      var splide03 = new Splide( '#splide03', {
+        // height : 400,
+        type   : 'loop',
+        gap    : '1rem',
+        perPage: 3,
+      } );
+
+      splide03.on( 'overflow', overflow => {
+        console.log( 'splide03:', overflow );
+        splide03.go( 0 );
+
+        if ( overflow ) {
+          splide03.options = { clones: undefined, arrows: true, pagination: true, drag: true };
+        } else {
+          splide03.options = { clones: 0, arrows: false, pagination: false, drag: false };
+        }
+      } );
+
+      splide03.mount();
+
+      var add    = document.getElementById( 'add' );
+      var remove = document.getElementById( 'remove' );
+
+      var index = 1;
+
+      add.addEventListener( 'click', function() {
+        splide03.add( [
+          `<li class="splide__slide"><img src="../../assets/images/pics/slide${ String( ++index ).padStart( 2, '0' ) }.jpg"></li>`,
+        ] );
+      } );
+
+      remove.addEventListener( 'click', function() {
+        splide03.remove( splide03.length - 1 );
+      } );
+
+      var splide04 = new Splide( '#splide04', {
+        autoWidth : true,
+        gap       : '1rem',
+        focus     : 0,
+        drag      : 'free',
+        compact   : true,
+      } );
+
+      splide04.on( 'overflow', overflow => {
+        console.log( 'splide04:', overflow );
+
+        if ( overflow ) {
+          splide04.options = { arrows: true, pagination: true, drag: true };
+        } else {
+          splide04.options = { arrows: false, pagination: false, drag: false };
+        }
+      } );
+
+      splide04.mount();
     } );
   </script>
 
   <style>
-    .splide:not( .is-overflow ) .splide__list {
+    .splide.is-inactive .splide__list {
       justify-content: center;
     }
   </style>
@@ -73,5 +121,34 @@ $settings = get_settings();
 <?php render( 'splide01' ); ?>
 <?php render( 'splide02' ); ?>
 
+<?php render( 'splide03', 1 ); ?>
+<button id="add">Add</button>
+<button id="remove">Remove</button>
+
+<div id="splide04" class="splide">
+  <div class="splide__track">
+    <ul class="splide__list">
+      <li style="width: 100px" class="splide__slide">
+        <img src="../../assets/images/pics/slide01.jpg">
+      </li>
+      <li style="width: 200px" class="splide__slide">
+        <img src="../../assets/images/pics/slide02.jpg">
+      </li>
+      <li style="width: 100px" class="splide__slide">
+        <img src="../../assets/images/pics/slide03.jpg">
+      </li>
+      <li style="width: 200px" class="splide__slide">
+        <img src="../../assets/images/pics/slide04.jpg">
+      </li>
+      <li style="width: 300px" class="splide__slide">
+        <img src="../../assets/images/pics/slide05.jpg">
+      </li>
+      <li style="width: 200px" class="splide__slide">
+        <img src="../../assets/images/pics/slide06.jpg">
+      </li>
+    </ul>
+  </div>
+</div>
+
 </body>
 </html>