Number of clones are determined by fixedWidth or fixedHeight if they are provided, or can be by "clones" options(#55).

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 2.3.7
+ * Version  : 2.3.8
  * License  : MIT
  * Copyright: 2020 Naotoshi Fujita
  */
@@ -1132,6 +1132,14 @@ var DEFAULTS = {
    */
   perMove: 0,
 
+  /**
+   * Determine manually how many clones should be generated on the left and right side.
+   * The total number of clones will be twice of this number.
+   *
+   * @type {number}
+   */
+  clones: 0,
+
   /**
    * Start index.
    *
@@ -3151,6 +3159,7 @@ var controller_floor = Math.floor;
  */
 
 
+
 /**
  * The component for cloning some slides for "loop" mode of the track.
  *
@@ -3225,7 +3234,7 @@ var controller_floor = Math.floor;
 
   };
   /**
-   * Generate and append clones.
+   * Generate and append/prepend clones.
    */
 
   function generateClones() {
@@ -3240,14 +3249,16 @@ var controller_floor = Math.floor;
 
     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(-count).forEach(function (elm, index) {
       var clone = cloneDeeply(elm);
       before(clone, slides[0]);
@@ -3258,6 +3269,8 @@ var controller_floor = Math.floor;
   /**
    * Return half count of clones to be generated.
    * Clone count is determined by:
+   * - "clones" value in the options.
+   * - Number of slides that can be placed in a view in "fixed" mode.
    * - Max pages a flick action can move.
    * - Whether the slide length is enough for perPage.
    *
@@ -3268,11 +3281,21 @@ var controller_floor = Math.floor;
   function getCloneCount() {
     var options = Splide.options;
 
-    if (options.autoWidth) {
-      return Elements.length;
+    if (options.clones) {
+      return options.clones;
+    } // Use the slide length in autoWidth mode because the number candnot be calculated.
+
+
+    var baseCount = options.autoWidth ? Elements.length : options.perPage;
+    var dimension = options.direction === TTB ? 'Height' : 'Width';
+    var fixedSize = options["fixed" + dimension];
+
+    if (fixedSize) {
+      // Roughly determine the count. This needs not to be strict.
+      baseCount = Math.ceil(Elements.track["client" + dimension] / fixedSize);
     }
 
-    return options.perPage * (options.drag ? options.flickMaxPages + 1 : 1);
+    return baseCount * (options.drag ? options.flickMaxPages + 1 : 1);
   }
   /**
    * Clone deeply the given element.

dist/js/splide.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 2.3.7
+ * Version  : 2.3.8
  * License  : MIT
  * Copyright: 2020 Naotoshi Fujita
  */
@@ -1122,6 +1122,14 @@ var DEFAULTS = {
    */
   perMove: 0,
 
+  /**
+   * Determine manually how many clones should be generated on the left and right side.
+   * The total number of clones will be twice of this number.
+   *
+   * @type {number}
+   */
+  clones: 0,
+
   /**
    * Start index.
    *
@@ -3141,6 +3149,7 @@ var controller_floor = Math.floor;
  */
 
 
+
 /**
  * The component for cloning some slides for "loop" mode of the track.
  *
@@ -3215,7 +3224,7 @@ var controller_floor = Math.floor;
 
   };
   /**
-   * Generate and append clones.
+   * Generate and append/prepend clones.
    */
 
   function generateClones() {
@@ -3230,14 +3239,16 @@ var controller_floor = Math.floor;
 
     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(-count).forEach(function (elm, index) {
       var clone = cloneDeeply(elm);
       before(clone, slides[0]);
@@ -3248,6 +3259,8 @@ var controller_floor = Math.floor;
   /**
    * Return half count of clones to be generated.
    * Clone count is determined by:
+   * - "clones" value in the options.
+   * - Number of slides that can be placed in a view in "fixed" mode.
    * - Max pages a flick action can move.
    * - Whether the slide length is enough for perPage.
    *
@@ -3258,11 +3271,21 @@ var controller_floor = Math.floor;
   function getCloneCount() {
     var options = Splide.options;
 
-    if (options.autoWidth) {
-      return Elements.length;
+    if (options.clones) {
+      return options.clones;
+    } // Use the slide length in autoWidth mode because the number candnot be calculated.
+
+
+    var baseCount = options.autoWidth ? Elements.length : options.perPage;
+    var dimension = options.direction === TTB ? 'Height' : 'Width';
+    var fixedSize = options["fixed" + dimension];
+
+    if (fixedSize) {
+      // Roughly determine the count. This needs not to be strict.
+      baseCount = Math.ceil(Elements.track["client" + dimension] / fixedSize);
     }
 
-    return options.perPage * (options.drag ? options.flickMaxPages + 1 : 1);
+    return baseCount * (options.drag ? options.flickMaxPages + 1 : 1);
   }
   /**
    * Clone deeply the given element.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "2.3.2",
+  "version": "2.3.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "2.3.7",
+  "version": "2.3.8",
   "description": "Splide is a lightweight and powerful slider without any dependencies.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

src/js/components/clones/index.js

@@ -5,8 +5,9 @@
  * @copyright Naotoshi Fujita. All rights reserved.
  */
 
-import { LOOP } from '../../constants/types';
 import { addClass, removeAttribute, append, before, remove } from '../../utils/dom';
+import { LOOP } from '../../constants/types';
+import { TTB } from "../../constants/directions";
 
 
 /**
@@ -80,7 +81,7 @@ export default ( Splide, Components ) => {
 	};
 
 	/**
-	 * Generate and append clones.
+	 * Generate and append/prepend clones.
 	 */
 	function generateClones() {
 		const length = Elements.length;
@@ -96,6 +97,7 @@ export default ( Splide, Components ) => {
 			slides = slides.concat( slides );
 		}
 
+		// Clones after the last element.
 		slides.slice( 0, count ).forEach( ( elm, index ) => {
 			const clone = cloneDeeply( elm );
 			append( Elements.list, clone );
@@ -104,6 +106,7 @@ export default ( Splide, Components ) => {
 			Elements.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] );
@@ -116,6 +119,8 @@ export default ( Splide, Components ) => {
 	/**
 	 * Return half count of clones to be generated.
 	 * Clone count is determined by:
+	 * - "clones" value in the options.
+	 * - Number of slides that can be placed in a view in "fixed" mode.
 	 * - Max pages a flick action can move.
 	 * - Whether the slide length is enough for perPage.
 	 *
@@ -124,11 +129,22 @@ export default ( Splide, Components ) => {
 	function getCloneCount() {
 		const options = Splide.options;
 
-		if ( options.autoWidth ) {
-			return Elements.length;
+		if ( options.clones ) {
+			return options.clones;
+		}
+
+		// Use the slide length in autoWidth mode because the number candnot be calculated.
+		let baseCount = options.autoWidth ? Elements.length : options.perPage;
+
+		const dimension = options.direction === TTB ? 'Height' : 'Width';
+		const fixedSize = options[ `fixed${ dimension }` ];
+
+		if ( fixedSize ) {
+			// Roughly determine the count. This needs not to be strict.
+			baseCount = Math.ceil( Elements.track[ `client${ dimension }` ] / fixedSize );
 		}
 
-		return options.perPage * ( options.drag ? options.flickMaxPages + 1 : 1 );
+		return baseCount * ( options.drag ? options.flickMaxPages + 1 : 1 );
 	}
 
 	/**

src/js/constants/defaults.js

@@ -103,6 +103,14 @@ export const DEFAULTS = {
 	 */
 	perMove: 0,
 
+	/**
+	 * Determine manually how many clones should be generated on the left and right side.
+	 * The total number of clones will be twice of this number.
+	 *
+	 * @type {number}
+	 */
+	clones: 0,
+
 	/**
 	 * Start index.
 	 *