Manually call the `resize()` method after generating clones to ensure a carousel is resized.

dist/js/splide.cjs.js

@@ -1312,6 +1312,7 @@ function Layout(Splide2, Components2, options) {
 
   return {
     mount: mount,
+    resize: resize,
     listSize: listSize,
     slideSize: slideSize,
     sliderSize: sliderSize,
@@ -1324,8 +1325,7 @@ var MULTIPLIER = 2;
 
 function Clones(Splide2, Components2, options) {
   var event = EventInterface(Splide2);
-  var on = event.on,
-      emit = event.emit;
+  var on = event.on;
   var Elements = Components2.Elements,
       Slides = Components2.Slides;
   var resolve = Components2.Direction.resolve;
@@ -1338,7 +1338,7 @@ function Clones(Splide2, Components2, options) {
 
     if (cloneCount = computeCloneCount()) {
       generate(cloneCount);
-      emit(EVENT_RESIZE);
+      Components2.Layout.resize();
     }
   }
 
@@ -1358,7 +1358,7 @@ function Clones(Splide2, Components2, options) {
 
     if (cloneCount !== count) {
       if (cloneCount < count || !count) {
-        emit(EVENT_REFRESH);
+        event.emit(EVENT_REFRESH);
       }
     }
   }
@@ -2831,6 +2831,7 @@ function Live(Splide2, Components2, options) {
       interval.start();
     } else {
       remove(sr);
+      interval.cancel();
     }
   }
 

dist/js/splide.esm.js

@@ -1307,6 +1307,7 @@ function Layout(Splide2, Components2, options) {
 
   return {
     mount: mount,
+    resize: resize,
     listSize: listSize,
     slideSize: slideSize,
     sliderSize: sliderSize,
@@ -1319,8 +1320,7 @@ var MULTIPLIER = 2;
 
 function Clones(Splide2, Components2, options) {
   var event = EventInterface(Splide2);
-  var on = event.on,
-      emit = event.emit;
+  var on = event.on;
   var Elements = Components2.Elements,
       Slides = Components2.Slides;
   var resolve = Components2.Direction.resolve;
@@ -1333,7 +1333,7 @@ function Clones(Splide2, Components2, options) {
 
     if (cloneCount = computeCloneCount()) {
       generate(cloneCount);
-      emit(EVENT_RESIZE);
+      Components2.Layout.resize();
     }
   }
 
@@ -1353,7 +1353,7 @@ function Clones(Splide2, Components2, options) {
 
     if (cloneCount !== count) {
       if (cloneCount < count || !count) {
-        emit(EVENT_REFRESH);
+        event.emit(EVENT_REFRESH);
       }
     }
   }
@@ -2826,6 +2826,7 @@ function Live(Splide2, Components2, options) {
       interval.start();
     } else {
       remove(sr);
+      interval.cancel();
     }
   }
 

dist/js/splide.js

@@ -1305,6 +1305,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     return {
       mount: mount,
+      resize: resize,
       listSize: listSize,
       slideSize: slideSize,
       sliderSize: sliderSize,
@@ -1317,8 +1318,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
   function Clones(Splide2, Components2, options) {
     var event = EventInterface(Splide2);
-    var on = event.on,
-        emit = event.emit;
+    var on = event.on;
     var Elements = Components2.Elements,
         Slides = Components2.Slides;
     var resolve = Components2.Direction.resolve;
@@ -1331,7 +1331,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
       if (cloneCount = computeCloneCount()) {
         generate(cloneCount);
-        emit(EVENT_RESIZE);
+        Components2.Layout.resize();
       }
     }
 
@@ -1351,7 +1351,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
       if (cloneCount !== count) {
         if (cloneCount < count || !count) {
-          emit(EVENT_REFRESH);
+          event.emit(EVENT_REFRESH);
         }
       }
     }
@@ -2824,6 +2824,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         interval.start();
       } else {
         remove(sr);
+        interval.cancel();
       }
     }
 

dist/types/index.d.ts

@@ -71,6 +71,8 @@ interface LayoutComponent extends BaseComponent {
     sliderSize(): number;
     totalSize(index?: number, withoutGap?: boolean): number;
     getPadding(right: boolean): number;
+    /** @internal */
+    resize(): void;
 }
 
 /**

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",

src/js/components/Clones/Clones.ts

@@ -34,7 +34,7 @@ export const MULTIPLIER = 2;
  */
 export function Clones( Splide: Splide, Components: Components, options: Options ): ClonesComponent {
   const event = EventInterface( Splide );
-  const { on, emit } = event;
+  const { on } = event;
   const { Elements, Slides } = Components;
   const { resolve } = Components.Direction;
 
@@ -58,7 +58,7 @@ export function Clones( Splide: Splide, Components: Components, options: Options
 
     if ( ( cloneCount = computeCloneCount() ) ) {
       generate( cloneCount );
-      emit( EVENT_RESIZE );
+      Components.Layout.resize();
     }
   }
 
@@ -87,7 +87,7 @@ export function Clones( Splide: Splide, Components: Components, options: Options
 
     if ( cloneCount !== count ) {
       if ( cloneCount < count || ! count ) {
-        emit( EVENT_REFRESH );
+        event.emit( EVENT_REFRESH );
       }
     }
   }

src/js/components/Layout/Layout.ts

@@ -18,6 +18,9 @@ export interface LayoutComponent extends BaseComponent {
   sliderSize(): number;
   totalSize( index?: number, withoutGap?: boolean ): number;
   getPadding( right: boolean ): number;
+
+  /** @internal */
+  resize(): void;
 }
 
 /**
@@ -259,6 +262,7 @@ export function Layout( Splide: Splide, Components: Components, options: Options
 
   return {
     mount,
+    resize,
     listSize,
     slideSize,
     sliderSize,

src/js/test/php/examples/default.php

@@ -22,7 +22,7 @@ $settings = get_settings();
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide = new Splide( '#splide01', {
         width: 800,
-        // type        : 'loop',
+        type        : 'loop',
         perPage: 2,
         // perMove: 3,
         // rewind: true,