Bug Fix: The order of the `Slides` array was incorrect after refresh.

dist/js/splide-renderer.min.js

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

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 4.0.14
+ * Version  : 4.0.15
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -1050,11 +1050,6 @@ function Slides(Splide2, Components2, options) {
     init();
     on(EVENT_REFRESH, destroy);
     on(EVENT_REFRESH, init);
-    on([EVENT_MOUNTED, EVENT_REFRESH], function () {
-      Slides2.sort(function (Slide1, Slide2) {
-        return Slide1.index - Slide2.index;
-      });
-    });
   }
 
   function init() {
@@ -1080,6 +1075,9 @@ function Slides(Splide2, Components2, options) {
     var object = Slide$1(Splide2, index, slideIndex, slide);
     object.mount();
     Slides2.push(object);
+    Slides2.sort(function (Slide1, Slide2) {
+      return Slide1.index - Slide2.index;
+    });
   }
 
   function get(excludeClones) {

dist/js/splide.esm.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 4.0.14
+ * Version  : 4.0.15
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -1045,11 +1045,6 @@ function Slides(Splide2, Components2, options) {
     init();
     on(EVENT_REFRESH, destroy);
     on(EVENT_REFRESH, init);
-    on([EVENT_MOUNTED, EVENT_REFRESH], function () {
-      Slides2.sort(function (Slide1, Slide2) {
-        return Slide1.index - Slide2.index;
-      });
-    });
   }
 
   function init() {
@@ -1075,6 +1070,9 @@ function Slides(Splide2, Components2, options) {
     var object = Slide$1(Splide2, index, slideIndex, slide);
     object.mount();
     Slides2.push(object);
+    Slides2.sort(function (Slide1, Slide2) {
+      return Slide1.index - Slide2.index;
+    });
   }
 
   function get(excludeClones) {

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 4.0.14
+ * Version  : 4.0.15
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -1043,11 +1043,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       init();
       on(EVENT_REFRESH, destroy);
       on(EVENT_REFRESH, init);
-      on([EVENT_MOUNTED, EVENT_REFRESH], function () {
-        Slides2.sort(function (Slide1, Slide2) {
-          return Slide1.index - Slide2.index;
-        });
-      });
     }
 
     function init() {
@@ -1073,6 +1068,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       var object = Slide$1(Splide2, index, slideIndex, slide);
       object.mount();
       Slides2.push(object);
+      Slides2.sort(function (Slide1, Slide2) {
+        return Slide1.index - Slide2.index;
+      });
     }
 
     function get(excludeClones) {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@splidejs/splide",
-  "version": "4.0.14",
+  "version": "4.0.15",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@splidejs/splide",
-      "version": "4.0.14",
+      "version": "4.0.15",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.18.13",

package.json

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

src/js/components/Slides/Slides.ts

@@ -1,10 +1,11 @@
-import { EVENT_MOUNTED, EVENT_REFRESH, EVENT_RESIZE } from '../../constants/events';
+import { EVENT_REFRESH, EVENT_RESIZE } from '../../constants/events';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { AnyFunction, BaseComponent, Components, Options } from '../../types';
 import {
   addClass,
-  append, apply,
+  append,
+  apply,
   before,
   between,
   empty,
@@ -90,9 +91,6 @@ export function Slides( Splide: Splide, Components: Components, options: Options
     init();
     on( EVENT_REFRESH, destroy );
     on( EVENT_REFRESH, init );
-    on( [ EVENT_MOUNTED, EVENT_REFRESH ], () => {
-      Slides.sort( ( Slide1, Slide2 ) => Slide1.index - Slide2.index );
-    } );
   }
 
   /**
@@ -119,6 +117,7 @@ export function Slides( Splide: Splide, Components: Components, options: Options
 
   /**
    * Registers a slide element and creates a Slide object.
+   * Needs to sort every time when a new slide is registered especially for clones.
    *
    * @param slide      - A slide element to register.
    * @param index      - A slide index.
@@ -128,6 +127,7 @@ export function Slides( Splide: Splide, Components: Components, options: Options
     const object = Slide( Splide, index, slideIndex, slide );
     object.mount();
     Slides.push( object );
+    Slides.sort( ( Slide1, Slide2 ) => Slide1.index - Slide2.index );
   }
 
   /**

src/js/components/Slides/test/add.test.ts

@@ -64,4 +64,19 @@ describe( 'Slides#add()', () => {
     expect( Slides.getAt( 1 ).slide ).toBe( slide1 );
     expect( Slides.getAt( 2 ).slide ).toBe( slide2 );
   } );
+
+  test( 'should not break the order of Slides.', () => {
+    const splide = init( { type: 'loop' } );
+    const { Slides } = splide.Components;
+    const slide  = document.createElement( 'div' );
+    const slides = Slides.get();
+
+    expect( slides[ 0 ].index ).toBeLessThan( 0 ); // negative index for clones
+    expect( slides[ slides.length - 1 ].index ).toBeGreaterThanOrEqual( splide.length );
+
+    Slides.add( slide, 1 ); // This emits refresh.
+
+    expect( slides[ 0 ].index ).toBeLessThan( 0 ); // negative index for clones
+    expect( slides[ slides.length - 1 ].index ).toBeGreaterThanOrEqual( splide.length );
+  } );
 } );