Bug Fix: The number of clones was incorrect when the slide width was fixed.

dist/js/splide.cjs.js

@@ -192,17 +192,13 @@ function create(tag, attrs, parent) {
   return elm;
 }
 
-function style(elms, styles) {
+function style(elm, styles) {
   if (isString(styles)) {
-    return isArray(elms) ? null : getComputedStyle(elms)[styles];
+    return getComputedStyle(elm)[styles];
   }
   forOwn(styles, (value, key) => {
     if (!isNull(value)) {
-      forEach(elms, (elm) => {
-        if (elm) {
-          elm.style[key] = `${value}`;
-        }
-      });
+      elm.style[key] = `${value}`;
     }
   });
 }
@@ -219,6 +215,27 @@ function hasClass(elm, className) {
   return elm && elm.classList.contains(className);
 }
 
+function rect(target) {
+  return target.getBoundingClientRect();
+}
+
+function remove(nodes) {
+  forEach(nodes, (node) => {
+    if (node && node.parentNode) {
+      node.parentNode.removeChild(node);
+    }
+  });
+}
+
+function measure(parent, value) {
+  if (isString(value)) {
+    const div = create("div", { style: `width: ${value}; position: absolute;` }, parent);
+    value = rect(div).width;
+    remove(div);
+  }
+  return value;
+}
+
 function parseHtml(html) {
   return child(new DOMParser().parseFromString(html, "text/html").body);
 }
@@ -239,18 +256,6 @@ function queryAll(parent, selector) {
   return slice(parent.querySelectorAll(selector));
 }
 
-function rect(target) {
-  return target.getBoundingClientRect();
-}
-
-function remove(nodes) {
-  forEach(nodes, (node) => {
-    if (node && node.parentNode) {
-      node.parentNode.removeChild(node);
-    }
-  });
-}
-
 function removeClass(elm, classes) {
   toggleClass(elm, classes, false);
 }
@@ -831,10 +836,10 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   }
   function onMove(next, prev, dest) {
     if (!destroyed) {
+      update.call(this);
       if (dest === index) {
         updateActivity.call(this, true);
       }
-      update.call(this);
     }
   }
   function update() {
@@ -1064,7 +1069,7 @@ function Clones(Splide2, Components2, options) {
     if (!Splide2.is(LOOP)) {
       clones2 = 0;
     } else if (!clones2) {
-      const fixedSize = options[resolve("fixedWidth")];
+      const fixedSize = measure(Elements.list, options[resolve("fixedWidth")]);
       const fixedCount = fixedSize && ceil(rect(Elements.track)[resolve("width")] / fixedSize);
       const baseCount = fixedCount || options[resolve("autoWidth")] && Splide2.length || options.perPage;
       clones2 = baseCount * (options.drag ? (options.flickMaxPages || 1) + 1 : 2);

dist/js/splide.esm.js

@@ -188,17 +188,13 @@ function create(tag, attrs, parent) {
   return elm;
 }
 
-function style(elms, styles) {
+function style(elm, styles) {
   if (isString(styles)) {
-    return isArray(elms) ? null : getComputedStyle(elms)[styles];
+    return getComputedStyle(elm)[styles];
   }
   forOwn(styles, (value, key) => {
     if (!isNull(value)) {
-      forEach(elms, (elm) => {
-        if (elm) {
-          elm.style[key] = `${value}`;
-        }
-      });
+      elm.style[key] = `${value}`;
     }
   });
 }
@@ -215,6 +211,27 @@ function hasClass(elm, className) {
   return elm && elm.classList.contains(className);
 }
 
+function rect(target) {
+  return target.getBoundingClientRect();
+}
+
+function remove(nodes) {
+  forEach(nodes, (node) => {
+    if (node && node.parentNode) {
+      node.parentNode.removeChild(node);
+    }
+  });
+}
+
+function measure(parent, value) {
+  if (isString(value)) {
+    const div = create("div", { style: `width: ${value}; position: absolute;` }, parent);
+    value = rect(div).width;
+    remove(div);
+  }
+  return value;
+}
+
 function parseHtml(html) {
   return child(new DOMParser().parseFromString(html, "text/html").body);
 }
@@ -235,18 +252,6 @@ function queryAll(parent, selector) {
   return slice(parent.querySelectorAll(selector));
 }
 
-function rect(target) {
-  return target.getBoundingClientRect();
-}
-
-function remove(nodes) {
-  forEach(nodes, (node) => {
-    if (node && node.parentNode) {
-      node.parentNode.removeChild(node);
-    }
-  });
-}
-
 function removeClass(elm, classes) {
   toggleClass(elm, classes, false);
 }
@@ -827,10 +832,10 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   }
   function onMove(next, prev, dest) {
     if (!destroyed) {
+      update.call(this);
       if (dest === index) {
         updateActivity.call(this, true);
       }
-      update.call(this);
     }
   }
   function update() {
@@ -1060,7 +1065,7 @@ function Clones(Splide2, Components2, options) {
     if (!Splide2.is(LOOP)) {
       clones2 = 0;
     } else if (!clones2) {
-      const fixedSize = options[resolve("fixedWidth")];
+      const fixedSize = measure(Elements.list, options[resolve("fixedWidth")]);
       const fixedCount = fixedSize && ceil(rect(Elements.track)[resolve("width")] / fixedSize);
       const baseCount = fixedCount || options[resolve("autoWidth")] && Splide2.length || options.perPage;
       clones2 = baseCount * (options.drag ? (options.flickMaxPages || 1) + 1 : 2);

dist/js/splide.js

@@ -215,18 +215,14 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     return elm;
   }
 
-  function style(elms, styles) {
+  function style(elm, styles) {
     if (isString(styles)) {
-      return isArray(elms) ? null : getComputedStyle(elms)[styles];
+      return getComputedStyle(elm)[styles];
     }
 
     forOwn(styles, function (value, key) {
       if (!isNull(value)) {
-        forEach(elms, function (elm) {
-          if (elm) {
-            elm.style[key] = "" + value;
-          }
-        });
+        elm.style[key] = "" + value;
       }
     });
   }
@@ -245,6 +241,30 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     return elm && elm.classList.contains(className);
   }
 
+  function rect(target) {
+    return target.getBoundingClientRect();
+  }
+
+  function remove(nodes) {
+    forEach(nodes, function (node) {
+      if (node && node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    });
+  }
+
+  function measure(parent, value) {
+    if (isString(value)) {
+      var div = create("div", {
+        style: "width: " + value + "; position: absolute;"
+      }, parent);
+      value = rect(div).width;
+      remove(div);
+    }
+
+    return value;
+  }
+
   function parseHtml(html) {
     return child(new DOMParser().parseFromString(html, "text/html").body);
   }
@@ -266,18 +286,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     return slice(parent.querySelectorAll(selector));
   }
 
-  function rect(target) {
-    return target.getBoundingClientRect();
-  }
-
-  function remove(nodes) {
-    forEach(nodes, function (node) {
-      if (node && node.parentNode) {
-        node.parentNode.removeChild(node);
-      }
-    });
-  }
-
   function removeClass(elm, classes) {
     toggleClass(elm, classes, false);
   }
@@ -960,11 +968,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function onMove(next, prev, dest) {
       if (!destroyed) {
+        update.call(this);
+
         if (dest === index) {
           updateActivity.call(this, true);
         }
-
-        update.call(this);
       }
     }
 
@@ -1256,7 +1264,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       if (!Splide2.is(LOOP)) {
         clones2 = 0;
       } else if (!clones2) {
-        var fixedSize = options[resolve("fixedWidth")];
+        var fixedSize = measure(Elements.list, options[resolve("fixedWidth")]);
         var fixedCount = fixedSize && ceil(rect(Elements.track)[resolve("width")] / fixedSize);
         var baseCount = fixedCount || options[resolve("autoWidth")] && Splide2.length || options.perPage;
         clones2 = baseCount * (options.drag ? (options.flickMaxPages || 1) + 1 : 2);

dist/types/utils/dom/index.d.ts

@@ -8,6 +8,7 @@ export { display } from './display/display';
 export { getAttribute } from './getAttribute/getAttribute';
 export { hasClass } from './hasClass/hasClass';
 export { matches } from './matches/matches';
+export { measure } from './measure/measure';
 export { parseHtml } from './parseHtml/parseHtml';
 export { prevent } from './prevent/prevent';
 export { query } from './query/query';

dist/types/utils/dom/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAa,qBAAqB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAe,iBAAiB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAe,iBAAiB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAgB,eAAe,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAa,qBAAqB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAe,iBAAiB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAc,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAS,6BAA6B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAa,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAc,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAY,uBAAuB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAc,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAgB,eAAe,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAa,qBAAqB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAiB,aAAa,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAe,iBAAiB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAU,2BAA2B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAS,6BAA6B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAgB,eAAe,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAU,2BAA2B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAiB,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAa,qBAAqB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAe,iBAAiB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAe,iBAAiB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAgB,eAAe,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAa,qBAAqB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAe,iBAAiB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAc,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAS,6BAA6B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAa,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAc,mBAAmB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAc,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAY,uBAAuB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAc,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAgB,eAAe,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAa,qBAAqB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAiB,aAAa,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAe,iBAAiB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAU,2BAA2B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAS,6BAA6B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAgB,eAAe,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAU,2BAA2B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAiB,aAAa,CAAC"}

dist/types/utils/dom/style/style.d.ts

@@ -4,7 +4,7 @@
  * @since 0.1.0
  */
 export declare type CSSStyleProperties = Exclude<keyof CSSStyleDeclaration, number>;
-export declare function style(elms: HTMLElement | HTMLElement[], styles: Record<string, string | number>): void;
-export declare function style<K extends CSSStyleProperties>(elms: HTMLElement, styles: K): CSSStyleDeclaration[K];
-export declare function style(elms: HTMLElement, styles: string): string;
+export declare function style(elm: HTMLElement, styles: Record<string, string | number>): void;
+export declare function style<K extends CSSStyleProperties>(elm: HTMLElement, styles: K): CSSStyleDeclaration[K];
+export declare function style(elm: HTMLElement, styles: string): string;
 //# sourceMappingURL=../../../../../src/js/utils/dom/style/style.d.ts.map

dist/types/utils/dom/style/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["style.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,oBAAY,kBAAkB,GAAG,OAAO,CAAC,MAAM,mBAAmB,EAAE,MAAM,CAAC,CAAC;AAE5E,wBAAgB,KAAK,CACnB,IAAI,EAAE,WAAW,GAAG,WAAW,EAAE,EACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GACtC,IAAI,CAAC;AAER,wBAAgB,KAAK,CAAC,CAAC,SAAS,kBAAkB,EAChD,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,CAAC,GACR,mBAAmB,CAAE,CAAC,CAAE,CAAC;AAE5B,wBAAgB,KAAK,CACnB,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,MAAM,GACb,MAAM,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["style.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,oBAAY,kBAAkB,GAAG,OAAO,CAAC,MAAM,mBAAmB,EAAE,MAAM,CAAC,CAAC;AAE5E,wBAAgB,KAAK,CACnB,GAAG,EAAE,WAAW,EAChB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GACtC,IAAI,CAAC;AAER,wBAAgB,KAAK,CAAC,CAAC,SAAS,kBAAkB,EAChD,GAAG,EAAE,WAAW,EAChB,MAAM,EAAE,CAAC,GACR,mBAAmB,CAAE,CAAC,CAAE,CAAC;AAE5B,wBAAgB,KAAK,CACnB,GAAG,EAAE,WAAW,EAChB,MAAM,EAAE,MAAM,GACb,MAAM,CAAC"}

src/js/components/Clones/Clones.ts

@@ -3,7 +3,7 @@ import { LOOP } from '../../constants/types';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { addClass, append, before, ceil, empty, pad, push, rect, remove } from '../../utils';
+import { addClass, append, before, ceil, empty, measure, pad, push, rect, remove } from '../../utils';
 
 
 /**
@@ -135,7 +135,7 @@ export function Clones( Splide: Splide, Components: Components, options: Options
     if ( ! Splide.is( LOOP ) ) {
       clones = 0;
     } else if ( ! clones ) {
-      const fixedSize  = options[ resolve( 'fixedWidth' ) ];
+      const fixedSize  = measure( Elements.list, options[ resolve( 'fixedWidth' ) ] );
       const fixedCount = fixedSize && ceil( rect( Elements.track )[ resolve( 'width' ) ] / fixedSize );
       const baseCount  = fixedCount || ( options[ resolve( 'autoWidth' ) ] && Splide.length ) || options.perPage;
 

src/js/components/Slides/Slide.ts

@@ -151,11 +151,11 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
    */
   function onMove( this: SlideComponent, next: number, prev: number, dest: number ): void {
     if ( ! destroyed ) {
+      update.call( this );
+
       if ( dest === index ) {
         updateActivity.call( this, true );
       }
-
-      update.call( this );
     }
   }
 

src/js/test/php/examples/fixedSize.php

@@ -20,7 +20,7 @@ $settings = get_settings();
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide01 = new Splide( '#splide01', {
         type       : 'loop',
-        fixedWidth : 100,
+        fixedWidth : '6rem',
         gap        : 10,
       } );
 

src/js/utils/dom/index.ts

@@ -8,6 +8,7 @@ export { display }         from './display/display';
 export { getAttribute }    from './getAttribute/getAttribute';
 export { hasClass }        from './hasClass/hasClass';
 export { matches }         from './matches/matches';
+export { measure }         from './measure/measure';
 export { parseHtml }       from './parseHtml/parseHtml';
 export { prevent }         from './prevent/prevent';
 export { query }           from './query/query';

src/js/utils/dom/measure/measure.ts

@@ -0,0 +1,23 @@
+import { isString } from '../../type/type';
+import { create } from '../create/create';
+import { rect } from '../rect/rect';
+import { remove } from '../remove/remove';
+
+
+/**
+ * Attempts to convert the provided value to pixel as the relative value to the parent element.
+ *
+ * @param parent - A parent element.
+ * @param value  - A value to convert.
+ *
+ * @return A converted value in pixel. Unhandled values will become 0.
+ */
+export function measure( parent: HTMLElement, value: number | string ): number {
+  if ( isString( value ) ) {
+    const div = create( 'div', { style: `width: ${ value }; position: absolute;` }, parent );
+    value = rect( div ).width;
+    remove( div );
+  }
+
+  return value;
+}

src/js/utils/dom/style/style.ts

@@ -1,6 +1,5 @@
-import { forEach } from '../../array';
 import { forOwn } from '../../object';
-import { isArray, isNull, isString } from '../../type/type';
+import { isNull, isString } from '../../type/type';
 
 
 /**
@@ -11,17 +10,17 @@ import { isArray, isNull, isString } from '../../type/type';
 export type CSSStyleProperties = Exclude<keyof CSSStyleDeclaration, number>;
 
 export function style(
-  elms: HTMLElement | HTMLElement[],
+  elm: HTMLElement,
   styles: Record<string, string | number>
 ): void;
 
 export function style<K extends CSSStyleProperties>(
-  elms: HTMLElement,
+  elm: HTMLElement,
   styles: K
 ): CSSStyleDeclaration[ K ];
 
 export function style(
-  elms: HTMLElement,
+  elm: HTMLElement,
   styles: string
 ): string;
 
@@ -29,24 +28,20 @@ export function style(
 /**
  * Applies inline styles to the provided element by an object literal.
  *
- * @param elms   - An element or elements to apply styles to.
+ * @param elm    - An element to apply styles to.
  * @param styles - An object literal with styles.
  */
 export function style<K extends CSSStyleProperties>(
-  elms: HTMLElement | HTMLElement[],
+  elm: HTMLElement,
   styles: Record<string, string | number> | K
 ): CSSStyleDeclaration[ K ] | string | void {
   if ( isString( styles ) ) {
-    return isArray( elms ) ? null : getComputedStyle( elms )[ styles ];
+    return getComputedStyle( elm )[ styles ];
   }
 
   forOwn( styles, ( value, key ) => {
     if ( ! isNull( value ) ) {
-      forEach( elms, elm => {
-        if ( elm ) {
-          elm.style[ key ] = `${ value }`;
-        }
-      } );
+      elm.style[ key ] = `${ value }`;
     }
   } );
 }