Always resize the carousel on update and refresh.

dist/js/splide-renderer.min.js

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

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 4.0.20
+ * Version  : 4.0.21
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -1212,18 +1212,17 @@ function Layout(Splide2, Components2, options) {
   }
 
   function init() {
-    rootRect = null;
     vertical = options.direction === TTB;
     style(root, "maxWidth", unit(options.width));
     style(track, resolve("paddingLeft"), cssPadding(false));
     style(track, resolve("paddingRight"), cssPadding(true));
-    resize();
+    resize(true);
   }
 
-  function resize() {
+  function resize(force) {
     var newRect = rect(root);
 
-    if (!rootRect || rootRect.width !== newRect.width || rootRect.height !== newRect.height) {
+    if (force || rootRect.width !== newRect.width || rootRect.height !== newRect.height) {
       style(track, "height", cssTrackHeight());
       styleSlides(resolve("marginRight"), unit(options.gap));
       styleSlides("width", cssSlideWidth());
@@ -2831,6 +2830,7 @@ function Live(Splide2, Components2, options) {
       interval.start();
     } else {
       remove(sr);
+      interval.cancel();
     }
   }
 

dist/js/splide.esm.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 4.0.20
+ * Version  : 4.0.21
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -1207,18 +1207,17 @@ function Layout(Splide2, Components2, options) {
   }
 
   function init() {
-    rootRect = null;
     vertical = options.direction === TTB;
     style(root, "maxWidth", unit(options.width));
     style(track, resolve("paddingLeft"), cssPadding(false));
     style(track, resolve("paddingRight"), cssPadding(true));
-    resize();
+    resize(true);
   }
 
-  function resize() {
+  function resize(force) {
     var newRect = rect(root);
 
-    if (!rootRect || rootRect.width !== newRect.width || rootRect.height !== newRect.height) {
+    if (force || rootRect.width !== newRect.width || rootRect.height !== newRect.height) {
       style(track, "height", cssTrackHeight());
       styleSlides(resolve("marginRight"), unit(options.gap));
       styleSlides("width", cssSlideWidth());
@@ -2826,6 +2825,7 @@ function Live(Splide2, Components2, options) {
       interval.start();
     } else {
       remove(sr);
+      interval.cancel();
     }
   }
 

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 4.0.20
+ * Version  : 4.0.21
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
@@ -1205,18 +1205,17 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function init() {
-      rootRect = null;
       vertical = options.direction === TTB;
       style(root, "maxWidth", unit(options.width));
       style(track, resolve("paddingLeft"), cssPadding(false));
       style(track, resolve("paddingRight"), cssPadding(true));
-      resize();
+      resize(true);
     }
 
-    function resize() {
+    function resize(force) {
       var newRect = rect(root);
 
-      if (!rootRect || rootRect.width !== newRect.width || rootRect.height !== newRect.height) {
+      if (force || rootRect.width !== newRect.width || rootRect.height !== newRect.height) {
         style(track, "height", cssTrackHeight());
         styleSlides(resolve("marginRight"), unit(options.gap));
         styleSlides("width", cssSlideWidth());
@@ -2824,6 +2823,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         interval.start();
       } else {
         remove(sr);
+        interval.cancel();
       }
     }
 

package-lock.json

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

package.json

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

src/js/components/Layout/Layout.ts

@@ -65,27 +65,29 @@ export function Layout( Splide: Splide, Components: Components, options: Options
 
   /**
    * Initializes the component on `mount` or `updated`.
-   * Uses `max-width` for the root to prevent the slider from exceeding the parent element.
+   * - Uses `max-width` for the root to prevent the slider from exceeding the parent element.
+   * - Needs to always resize the carousel in case that `refresh` is requested in multiple times at the same time.
    */
   function init(): void {
-    rootRect = null;
     vertical = options.direction === TTB;
 
     style( root, 'maxWidth', unit( options.width ) );
     style( track, resolve( 'paddingLeft' ), cssPadding( false ) );
     style( track, resolve( 'paddingRight' ), cssPadding( true ) );
 
-    resize();
+    resize( true );
   }
 
   /**
    * Updates dimensions of some elements when the carousel is resized.
    * Also checks the carousel size and emits `overflow` events when it exceeds the list width.
+   *
+   * @param force - Skips checking the root dimension change and always performs the resizing process.
    */
-  function resize(): void {
+  function resize( force?: boolean ): void {
     const newRect = rect( root );
 
-    if ( ! rootRect || rootRect.width !== newRect.width || rootRect.height !== newRect.height ) {
+    if ( force || rootRect.width !== newRect.width || rootRect.height !== newRect.height ) {
       style( track, 'height', cssTrackHeight() );
 
       styleSlides( resolve( 'marginRight' ), unit( options.gap ) );