Bug Fix: Relative units for the fixedWidth/fixedHeight option didn't work(#97).

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 2.4.9
+ * Version  : 2.4.10
  * License  : MIT
  * Copyright: 2020 Naotoshi Fujita
  */
@@ -2290,10 +2290,12 @@ var UID_NAME = 'uid';
      * Initialization.
      */
     init: function init() {
+      var _this2 = this;
+
       collect();
       addClass(root, getClasses());
-      Elements.slides.forEach(function (slide, index) {
-        Elements.register(slide, index, -1);
+      this.slides.forEach(function (slide, index) {
+        _this2.register(slide, index, -1);
       });
     },
 
@@ -3120,6 +3122,7 @@ var abs = Math.abs;
 
 
 
+
 /**
  * The component for cloning some slides for "loop" mode of the track.
  *
@@ -3161,10 +3164,15 @@ var abs = Math.abs;
      * Called when the component is mounted.
      */
     mount: function mount() {
+      var _this = this;
+
       if (Splide.is(LOOP)) {
         init();
         Splide.on('refresh', init).on('resize', function () {
           if (cloneCount !== getCloneCount()) {
+            // Destroy before refresh not to collect clones by the Elements component.
+            _this.destroy();
+
             Splide.refresh();
           }
         });
@@ -3215,32 +3223,31 @@ var abs = Math.abs;
 
 
   function generateClones(count) {
-    var length = Elements.length;
+    var length = Elements.length,
+        register = Elements.register;
 
-    if (!length) {
-      return;
-    }
-
-    var slides = Elements.slides;
+    if (length) {
+      var slides = Elements.slides;
 
-    while (slides.length < count) {
-      slides = slides.concat(slides);
-    } // Clones after the last element.
+      while (slides.length < count) {
+        slides = slides.concat(slides);
+      } // Clones after the last element.
 
 
-    slides.slice(0, count).forEach(function (elm, index) {
-      var clone = cloneDeeply(elm);
-      append(Elements.list, clone);
-      clones.push(clone);
-      Elements.register(clone, index + length, index % length);
-    }); // Clones before the first element.
+      slides.slice(0, count).forEach(function (elm, index) {
+        var clone = cloneDeeply(elm);
+        append(Elements.list, clone);
+        clones.push(clone);
+        register(clone, index + length, index % length);
+      }); // Clones before the first element.
 
-    slides.slice(-count).forEach(function (elm, index) {
-      var clone = cloneDeeply(elm);
-      before(clone, slides[0]);
-      clones.push(clone);
-      Elements.register(clone, index - count, (length + index - count % length) % length);
-    });
+      slides.slice(-count).forEach(function (elm, index) {
+        var clone = cloneDeeply(elm);
+        before(clone, slides[0]);
+        clones.push(clone);
+        register(clone, index - count, (length + index - count % length) % length);
+      });
+    }
   }
   /**
    * Return half count of clones to be generated.
@@ -3264,7 +3271,7 @@ var abs = Math.abs;
 
     var baseCount = options.autoWidth || options.autoHeight ? Elements.length : options.perPage;
     var dimension = options.direction === TTB ? 'Height' : 'Width';
-    var fixedSize = options["fixed" + dimension];
+    var fixedSize = toPixel(Splide.root, options["fixed" + dimension]);
 
     if (fixedSize) {
       // Roughly calculate the count. This needs not to be strict.

dist/js/splide.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 2.4.9
+ * Version  : 2.4.10
  * License  : MIT
  * Copyright: 2020 Naotoshi Fujita
  */
@@ -2280,10 +2280,12 @@ var UID_NAME = 'uid';
      * Initialization.
      */
     init: function init() {
+      var _this2 = this;
+
       collect();
       addClass(root, getClasses());
-      Elements.slides.forEach(function (slide, index) {
-        Elements.register(slide, index, -1);
+      this.slides.forEach(function (slide, index) {
+        _this2.register(slide, index, -1);
       });
     },
 
@@ -3110,6 +3112,7 @@ var abs = Math.abs;
 
 
 
+
 /**
  * The component for cloning some slides for "loop" mode of the track.
  *
@@ -3151,10 +3154,15 @@ var abs = Math.abs;
      * Called when the component is mounted.
      */
     mount: function mount() {
+      var _this = this;
+
       if (Splide.is(LOOP)) {
         init();
         Splide.on('refresh', init).on('resize', function () {
           if (cloneCount !== getCloneCount()) {
+            // Destroy before refresh not to collect clones by the Elements component.
+            _this.destroy();
+
             Splide.refresh();
           }
         });
@@ -3205,32 +3213,31 @@ var abs = Math.abs;
 
 
   function generateClones(count) {
-    var length = Elements.length;
+    var length = Elements.length,
+        register = Elements.register;
 
-    if (!length) {
-      return;
-    }
-
-    var slides = Elements.slides;
+    if (length) {
+      var slides = Elements.slides;
 
-    while (slides.length < count) {
-      slides = slides.concat(slides);
-    } // Clones after the last element.
+      while (slides.length < count) {
+        slides = slides.concat(slides);
+      } // Clones after the last element.
 
 
-    slides.slice(0, count).forEach(function (elm, index) {
-      var clone = cloneDeeply(elm);
-      append(Elements.list, clone);
-      clones.push(clone);
-      Elements.register(clone, index + length, index % length);
-    }); // Clones before the first element.
+      slides.slice(0, count).forEach(function (elm, index) {
+        var clone = cloneDeeply(elm);
+        append(Elements.list, clone);
+        clones.push(clone);
+        register(clone, index + length, index % length);
+      }); // Clones before the first element.
 
-    slides.slice(-count).forEach(function (elm, index) {
-      var clone = cloneDeeply(elm);
-      before(clone, slides[0]);
-      clones.push(clone);
-      Elements.register(clone, index - count, (length + index - count % length) % length);
-    });
+      slides.slice(-count).forEach(function (elm, index) {
+        var clone = cloneDeeply(elm);
+        before(clone, slides[0]);
+        clones.push(clone);
+        register(clone, index - count, (length + index - count % length) % length);
+      });
+    }
   }
   /**
    * Return half count of clones to be generated.
@@ -3254,7 +3261,7 @@ var abs = Math.abs;
 
     var baseCount = options.autoWidth || options.autoHeight ? Elements.length : options.perPage;
     var dimension = options.direction === TTB ? 'Height' : 'Width';
-    var fixedSize = options["fixed" + dimension];
+    var fixedSize = toPixel(Splide.root, options["fixed" + dimension]);
 
     if (fixedSize) {
       // Roughly calculate the count. This needs not to be strict.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "2.4.9",
+  "version": "2.4.10",
   "description": "Splide is a lightweight and powerful slider without any dependencies.",
   "author": "Naotoshi Fujita",
   "license": "MIT",
@@ -24,10 +24,10 @@
     "url": "https://github.com/Splidejs/splide/issues"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.1",
-    "@babel/preset-env": "^7.10.1",
-    "autoprefixer": "^9.8.0",
-    "babel-jest": "^26.0.1",
+    "@babel/core": "^7.10.5",
+    "@babel/preset-env": "^7.10.4",
+    "autoprefixer": "^9.8.5",
+    "babel-jest": "^26.1.0",
     "babel-loader": "^8.1.0",
     "cssnano": "^4.1.10",
     "gulp": "^4.0.2",
@@ -40,11 +40,11 @@
     "gulp-sass": "^4.1.0",
     "gulp-sass-glob": "^1.1.0",
     "gulp-uglify": "^3.0.2",
-    "jest": "^25.3.0",
+    "jest": "^26.1.0",
     "merge-stream": "^2.0.0",
-    "serialize-javascript": "^3.1.0",
+    "serialize-javascript": "^4.0.0",
     "uglifyjs-webpack-plugin": "^2.2.0",
-    "webpack": "^4.43.0",
+    "webpack": "^4.44.0",
     "webpack-stream": "^5.2.1"
   },
   "scripts": {

src/js/components/clones/index.js

@@ -8,6 +8,7 @@
 import { addClass, removeAttribute, append, before, remove } from '../../utils/dom';
 import { LOOP } from '../../constants/types';
 import { TTB } from "../../constants/directions";
+import { toPixel } from "../../utils/utils";
 
 
 /**
@@ -57,6 +58,8 @@ export default ( Splide, Components ) => {
 					.on( 'refresh', init )
 					.on( 'resize', () => {
 						if ( cloneCount !== getCloneCount() ) {
+							// Destroy before refresh not to collect clones by the Elements component.
+							this.destroy();
 							Splide.refresh();
 						}
 					} );
@@ -105,35 +108,33 @@ export default ( Splide, Components ) => {
 	 * @param {number} count - The half number of clones.
 	 */
 	function generateClones( count ) {
-		const length = Elements.length;
+		const { length, register } = Elements;
 
-		if ( ! length ) {
-			return;
-		}
-
-		let slides = Elements.slides;
+		if ( length ) {
+			let slides = Elements.slides;
 
-		while ( slides.length < count ) {
-			slides = slides.concat( slides );
-		}
+			while ( slides.length < count ) {
+				slides = slides.concat( slides );
+			}
 
-		// Clones after the last element.
-		slides.slice( 0, count ).forEach( ( elm, index ) => {
-			const clone = cloneDeeply( elm );
-			append( Elements.list, clone );
-			clones.push( clone );
+			// Clones after the last element.
+			slides.slice( 0, count ).forEach( ( elm, index ) => {
+				const clone = cloneDeeply( elm );
+				append( Elements.list, clone );
+				clones.push( clone );
 
-			Elements.register( clone, index + length, index % length );
-		} );
+				register( clone, index + length, index % length );
+			} );
 
-		// Clones before the first element.
-		slides.slice( -count ).forEach( ( elm, index ) => {
-			const clone = cloneDeeply( elm );
-			before( clone, slides[0] );
-			clones.push( clone );
+			// Clones before the first element.
+			slides.slice( -count ).forEach( ( elm, index ) => {
+				const clone = cloneDeeply( elm );
+				before( clone, slides[0] );
+				clones.push( clone );
 
-			Elements.register( clone, index - count, ( length + index - count % length ) % length );
-		} );
+				register( clone, index - count, ( length + index - count % length ) % length );
+			} );
+		}
 	}
 
 	/**
@@ -157,7 +158,7 @@ export default ( Splide, Components ) => {
 		let baseCount = options.autoWidth || options.autoHeight ? Elements.length : options.perPage;
 
 		const dimension = options.direction === TTB ? 'Height' : 'Width';
-		const fixedSize = options[ `fixed${ dimension }` ];
+		const fixedSize = toPixel( Splide.root, options[ `fixed${ dimension }` ] );
 
 		if ( fixedSize ) {
 			// Roughly calculate the count. This needs not to be strict.

src/js/components/elements/index.js

@@ -112,8 +112,8 @@ export default ( Splide, Components ) => {
 			collect();
 			addClass( root, getClasses() );
 
-			Elements.slides.forEach( ( slide, index ) => {
-				Elements.register( slide, index, -1 );
+			this.slides.forEach( ( slide, index ) => {
+				this.register( slide, index, -1 );
 			} );
 		},