Breakpoints support "drag" and "pagination". Throttle duration for the resize event can be changed through options.

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 2.2.8
+ * Version  : 2.3.0
  * License  : MIT
  * Copyright: 2020 Naotoshi Fujita
  */
@@ -1356,6 +1356,13 @@ var DEFAULTS = {
    */
   updateOnMove: false,
 
+  /**
+   * Throttle duration in milliseconds for the resize event.
+   *
+   * @type {number}
+   */
+  throttle: 100,
+
   /**
    * Breakpoints definitions.
    *
@@ -3645,13 +3652,6 @@ function createInterval(callback, interval, progress) {
 
 
 
-/**
- * Interval time for throttle.
- *
- * @type {number}
- */
-
-var THROTTLE = 100;
 /**
  * The component for handing slide layouts and their sizes.
  *
@@ -3713,7 +3713,7 @@ var THROTTLE = 100;
   function bind() {
     Splide.on('resize load', throttle(function () {
       Splide.emit('resize');
-    }, THROTTLE), window).on('resize', resize).on('updated refresh', init);
+    }, Splide.options.throttle), window).on('resize', resize).on('updated refresh', init);
   }
   /**
    * Resize the list and slides including clones.
@@ -3841,24 +3841,19 @@ var FRICTION_REDUCER = 7;
    */
 
   var Drag = {
-    /**
-     * Mount only when the drag option is true.
-     *
-     * @type {boolean}
-     */
-    required: Splide.options.drag,
-
     /**
      * Whether dragging is disabled or not.
      *
      * @type {boolean}
      */
-    disabled: false,
+    disabled: !Splide.options.drag,
 
     /**
      * Called when the component is mounted.
      */
     mount: function mount() {
+      var _this = this;
+
       var list = Components.Elements.list;
       Splide.on('touchstart mousedown', start, list).on('touchmove mousemove', move, list, {
         passive: false
@@ -3871,6 +3866,8 @@ var FRICTION_REDUCER = 7;
             passive: false
           });
         });
+      }).on('mounted updated', function () {
+        _this.disabled = !Splide.options.drag;
       });
     }
   };
@@ -4648,7 +4645,7 @@ var UPDATE_EVENT = 'updated.page refresh.page';
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ var pagination = (function (Splide, Components, name) {
+/* harmony default export */ var components_pagination = (function (Splide, Components, name) {
   /**
    * Store all data for pagination.
    * - list: A list element.
@@ -4676,26 +4673,41 @@ var UPDATE_EVENT = 'updated.page refresh.page';
      *
      * @type {boolean}
      */
-    required: Splide.options.pagination,
+    // required: Splide.options.pagination,
 
     /**
      * Called when the component is mounted.
      */
     mount: function mount() {
-      data = createPagination();
-      var slider = Elements.slider;
-      var parent = Splide.options.pagination === 'slider' && slider ? slider : Splide.root;
-      append(parent, data.list);
-      bind();
+      var pagination = Splide.options.pagination;
+
+      if (pagination) {
+        data = createPagination();
+        var slider = Elements.slider;
+        var parent = pagination === 'slider' && slider ? slider : Splide.root;
+        append(parent, data.list);
+        Splide.on(ATTRIBUTES_UPDATE_EVENT, updateAttributes);
+      }
+
+      Splide.off(UPDATE_EVENT).on(UPDATE_EVENT, function () {
+        Pagination.destroy();
+
+        if (Splide.options.pagination) {
+          Pagination.mount();
+          Pagination.mounted();
+        }
+      });
     },
 
     /**
      * Called after all components are mounted.
      */
     mounted: function mounted() {
-      var index = Splide.index;
-      Splide.emit(name + ":mounted", data, this.getItem(index));
-      updateAttributes(index, -1);
+      if (Splide.options.pagination) {
+        var index = Splide.index;
+        Splide.emit(name + ":mounted", data, this.getItem(index));
+        updateAttributes(index, -1);
+      }
     },
 
     /**
@@ -4709,7 +4721,7 @@ var UPDATE_EVENT = 'updated.page refresh.page';
         data.items.forEach(function (item) {
           Splide.off('click', item.button);
         });
-      } // Do not remove UPDATE events to recreate pagination if needed.
+      } // Do not remove UPDATE_EVENT to recreate pagination if needed.
 
 
       Splide.off(ATTRIBUTES_UPDATE_EVENT);
@@ -4737,20 +4749,6 @@ var UPDATE_EVENT = 'updated.page refresh.page';
     }
 
   };
-  /**
-   * Listen to some events.
-   */
-
-  function bind() {
-    Splide.on(ATTRIBUTES_UPDATE_EVENT, updateAttributes).on(UPDATE_EVENT, function () {
-      Pagination.destroy();
-
-      if (Splide.options.pagination) {
-        Pagination.mount();
-        Pagination.mounted();
-      }
-    });
-  }
   /**
    * Update attributes.
    *
@@ -4758,7 +4756,6 @@ var UPDATE_EVENT = 'updated.page refresh.page';
    * @param {number} prevIndex - Prev index.
    */
 
-
   function updateAttributes(index, prevIndex) {
     var prev = Pagination.getItem(prevIndex);
     var curr = Pagination.getItem(index);
@@ -5547,7 +5544,7 @@ var TRIGGER_KEYS = [' ', 'Enter', 'Spacebar'];
  * @type {number}
  */
 
-var breakpoints_THROTTLE = 50;
+var THROTTLE = 50;
 /**
  * The component for updating options according to a current window width.
  *
@@ -5569,7 +5566,7 @@ var breakpoints_THROTTLE = 50;
    * @type {Function}
    */
 
-  var throttledCheck = throttle(check, breakpoints_THROTTLE);
+  var throttledCheck = throttle(check, THROTTLE);
   /**
    * Keep initial options.
    *
@@ -5660,9 +5657,9 @@ var breakpoints_THROTTLE = 50;
         if (State.is(DESTROYED)) {
           State.set(CREATED);
           Splide.mount();
-        } else {
-          Splide.options = options;
         }
+
+        Splide.options = options;
       }
     }
   }
@@ -5720,7 +5717,7 @@ var COMPLETE = {
   Autoplay: components_autoplay,
   Cover: components_cover,
   Arrows: components_arrows,
-  Pagination: pagination,
+  Pagination: components_pagination,
   LazyLoad: lazyload,
   Keyboard: keyboard,
   Sync: sync,
@@ -5735,7 +5732,7 @@ var LIGHT = {
   Layout: layout,
   Drag: drag,
   Arrows: components_arrows,
-  Pagination: pagination,
+  Pagination: components_pagination,
   A11y: a11y
 };
 // CONCATENATED MODULE: ./build/module/module.js

dist/js/splide.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 2.2.8
+ * Version  : 2.3.0
  * License  : MIT
  * Copyright: 2020 Naotoshi Fujita
  */
@@ -1346,6 +1346,13 @@ var DEFAULTS = {
    */
   updateOnMove: false,
 
+  /**
+   * Throttle duration in milliseconds for the resize event.
+   *
+   * @type {number}
+   */
+  throttle: 100,
+
   /**
    * Breakpoints definitions.
    *
@@ -3635,13 +3642,6 @@ function createInterval(callback, interval, progress) {
 
 
 
-/**
- * Interval time for throttle.
- *
- * @type {number}
- */
-
-var THROTTLE = 100;
 /**
  * The component for handing slide layouts and their sizes.
  *
@@ -3703,7 +3703,7 @@ var THROTTLE = 100;
   function bind() {
     Splide.on('resize load', throttle(function () {
       Splide.emit('resize');
-    }, THROTTLE), window).on('resize', resize).on('updated refresh', init);
+    }, Splide.options.throttle), window).on('resize', resize).on('updated refresh', init);
   }
   /**
    * Resize the list and slides including clones.
@@ -3831,24 +3831,19 @@ var FRICTION_REDUCER = 7;
    */
 
   var Drag = {
-    /**
-     * Mount only when the drag option is true.
-     *
-     * @type {boolean}
-     */
-    required: Splide.options.drag,
-
     /**
      * Whether dragging is disabled or not.
      *
      * @type {boolean}
      */
-    disabled: false,
+    disabled: !Splide.options.drag,
 
     /**
      * Called when the component is mounted.
      */
     mount: function mount() {
+      var _this = this;
+
       var list = Components.Elements.list;
       Splide.on('touchstart mousedown', start, list).on('touchmove mousemove', move, list, {
         passive: false
@@ -3861,6 +3856,8 @@ var FRICTION_REDUCER = 7;
             passive: false
           });
         });
+      }).on('mounted updated', function () {
+        _this.disabled = !Splide.options.drag;
       });
     }
   };
@@ -4638,7 +4635,7 @@ var UPDATE_EVENT = 'updated.page refresh.page';
  * @return {Object} - The component object.
  */
 
-/* harmony default export */ var pagination = (function (Splide, Components, name) {
+/* harmony default export */ var components_pagination = (function (Splide, Components, name) {
   /**
    * Store all data for pagination.
    * - list: A list element.
@@ -4666,26 +4663,41 @@ var UPDATE_EVENT = 'updated.page refresh.page';
      *
      * @type {boolean}
      */
-    required: Splide.options.pagination,
+    // required: Splide.options.pagination,
 
     /**
      * Called when the component is mounted.
      */
     mount: function mount() {
-      data = createPagination();
-      var slider = Elements.slider;
-      var parent = Splide.options.pagination === 'slider' && slider ? slider : Splide.root;
-      append(parent, data.list);
-      bind();
+      var pagination = Splide.options.pagination;
+
+      if (pagination) {
+        data = createPagination();
+        var slider = Elements.slider;
+        var parent = pagination === 'slider' && slider ? slider : Splide.root;
+        append(parent, data.list);
+        Splide.on(ATTRIBUTES_UPDATE_EVENT, updateAttributes);
+      }
+
+      Splide.off(UPDATE_EVENT).on(UPDATE_EVENT, function () {
+        Pagination.destroy();
+
+        if (Splide.options.pagination) {
+          Pagination.mount();
+          Pagination.mounted();
+        }
+      });
     },
 
     /**
      * Called after all components are mounted.
      */
     mounted: function mounted() {
-      var index = Splide.index;
-      Splide.emit(name + ":mounted", data, this.getItem(index));
-      updateAttributes(index, -1);
+      if (Splide.options.pagination) {
+        var index = Splide.index;
+        Splide.emit(name + ":mounted", data, this.getItem(index));
+        updateAttributes(index, -1);
+      }
     },
 
     /**
@@ -4699,7 +4711,7 @@ var UPDATE_EVENT = 'updated.page refresh.page';
         data.items.forEach(function (item) {
           Splide.off('click', item.button);
         });
-      } // Do not remove UPDATE events to recreate pagination if needed.
+      } // Do not remove UPDATE_EVENT to recreate pagination if needed.
 
 
       Splide.off(ATTRIBUTES_UPDATE_EVENT);
@@ -4727,20 +4739,6 @@ var UPDATE_EVENT = 'updated.page refresh.page';
     }
 
   };
-  /**
-   * Listen to some events.
-   */
-
-  function bind() {
-    Splide.on(ATTRIBUTES_UPDATE_EVENT, updateAttributes).on(UPDATE_EVENT, function () {
-      Pagination.destroy();
-
-      if (Splide.options.pagination) {
-        Pagination.mount();
-        Pagination.mounted();
-      }
-    });
-  }
   /**
    * Update attributes.
    *
@@ -4748,7 +4746,6 @@ var UPDATE_EVENT = 'updated.page refresh.page';
    * @param {number} prevIndex - Prev index.
    */
 
-
   function updateAttributes(index, prevIndex) {
     var prev = Pagination.getItem(prevIndex);
     var curr = Pagination.getItem(index);
@@ -5537,7 +5534,7 @@ var TRIGGER_KEYS = [' ', 'Enter', 'Spacebar'];
  * @type {number}
  */
 
-var breakpoints_THROTTLE = 50;
+var THROTTLE = 50;
 /**
  * The component for updating options according to a current window width.
  *
@@ -5559,7 +5556,7 @@ var breakpoints_THROTTLE = 50;
    * @type {Function}
    */
 
-  var throttledCheck = throttle(check, breakpoints_THROTTLE);
+  var throttledCheck = throttle(check, THROTTLE);
   /**
    * Keep initial options.
    *
@@ -5650,9 +5647,9 @@ var breakpoints_THROTTLE = 50;
         if (State.is(DESTROYED)) {
           State.set(CREATED);
           Splide.mount();
-        } else {
-          Splide.options = options;
         }
+
+        Splide.options = options;
       }
     }
   }
@@ -5710,7 +5707,7 @@ var COMPLETE = {
   Autoplay: components_autoplay,
   Cover: components_cover,
   Arrows: components_arrows,
-  Pagination: pagination,
+  Pagination: components_pagination,
   LazyLoad: lazyload,
   Keyboard: keyboard,
   Sync: sync,
@@ -5725,7 +5722,7 @@ var LIGHT = {
   Layout: layout,
   Drag: drag,
   Arrows: components_arrows,
-  Pagination: pagination,
+  Pagination: components_pagination,
   A11y: a11y
 };
 // CONCATENATED MODULE: ./build/complete/complete.js

package.json

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

src/js/components/breakpoints/index.js

@@ -124,9 +124,9 @@ export default ( Splide ) => {
 				if ( State.is( DESTROYED ) ) {
 					State.set( CREATED );
 					Splide.mount();
-				} else {
-					Splide.options = options;
 				}
+
+				Splide.options = options;
 			}
 		}
 	}

src/js/components/drag/index.js

@@ -95,19 +95,12 @@ export default ( Splide, Components ) => {
 	 * @type {Object}
 	 */
 	const Drag = {
-		/**
-		 * Mount only when the drag option is true.
-		 *
-		 * @type {boolean}
-		 */
-		required: Splide.options.drag,
-
 		/**
 		 * Whether dragging is disabled or not.
 		 *
 		 * @type {boolean}
 		 */
-		disabled: false,
+		disabled: ! Splide.options.drag,
 
 		/**
 		 * Called when the component is mounted.
@@ -126,6 +119,9 @@ export default ( Splide, Components ) => {
 							.off( 'dragstart', elm )
 							.on( 'dragstart', e => { e.preventDefault() }, elm, { passive: false } );
 					} );
+				} )
+				.on( 'mounted updated', () => {
+					this.disabled = ! Splide.options.drag;
 				} );
 		},
 	};

src/js/components/layout/index.js

@@ -14,13 +14,6 @@ import { applyStyle, removeAttribute } from '../../utils/dom';
 import { assign } from "../../utils/object";
 import { TTB } from "../../constants/directions";
 
-/**
- * Interval time for throttle.
- *
- * @type {number}
- */
-const THROTTLE = 100;
-
 
 /**
  * The component for handing slide layouts and their sizes.
@@ -78,7 +71,7 @@ export default ( Splide, Components ) => {
 	 */
 	function bind() {
 		Splide
-			.on( 'resize load', throttle( () => { Splide.emit( 'resize' ) }, THROTTLE ), window )
+			.on( 'resize load', throttle( () => { Splide.emit( 'resize' ) }, Splide.options.throttle ), window )
 			.on( 'resize', resize )
 			.on( 'updated refresh', init );
 	}

src/js/components/pagination/index.js

@@ -55,33 +55,43 @@ export default ( Splide, Components, name ) => {
 	 * @type {Object}
 	 */
 	const Pagination = {
-		/**
-		 * Required only when the pagination option is true.
-		 *
-		 * @type {boolean}
-		 */
-		required: Splide.options.pagination,
-
 		/**
 		 * Called when the component is mounted.
 		 */
 		mount() {
-			data = createPagination();
+			const pagination = Splide.options.pagination;
+
+			if ( pagination ) {
+				data = createPagination();
+
+				const slider = Elements.slider;
+				const parent = pagination === 'slider' && slider ? slider : Splide.root;
+				append( parent, data.list );
+
+				Splide.on( ATTRIBUTES_UPDATE_EVENT, updateAttributes );
+			}
 
-			const slider = Elements.slider;
-			const parent = Splide.options.pagination === 'slider' && slider ? slider : Splide.root;
-			append( parent, data.list );
+			Splide
+				.off( UPDATE_EVENT )
+				.on( UPDATE_EVENT, () => {
+					Pagination.destroy();
 
-			bind();
+					if ( Splide.options.pagination ) {
+						Pagination.mount();
+						Pagination.mounted();
+					}
+				} );
 		},
 
 		/**
 		 * Called after all components are mounted.
 		 */
 		mounted() {
-			const index = Splide.index;
-			Splide.emit( `${ name }:mounted`, data, this.getItem( index ) );
-			updateAttributes( index, -1 );
+			if ( Splide.options.pagination ) {
+				const index = Splide.index;
+				Splide.emit( `${ name }:mounted`, data, this.getItem( index ) );
+				updateAttributes( index, -1 );
+			}
 		},
 
 		/**
@@ -95,7 +105,7 @@ export default ( Splide, Components, name ) => {
 				data.items.forEach( item => { Splide.off( 'click', item.button ) } );
 			}
 
-			// Do not remove UPDATE events to recreate pagination if needed.
+			// Do not remove UPDATE_EVENT to recreate pagination if needed.
 			Splide.off( ATTRIBUTES_UPDATE_EVENT );
 
 			data = {};
@@ -122,22 +132,6 @@ export default ( Splide, Components, name ) => {
 		},
 	};
 
-	/**
-	 * Listen to some events.
-	 */
-	function bind() {
-		Splide
-			.on( ATTRIBUTES_UPDATE_EVENT, updateAttributes )
-			.on( UPDATE_EVENT, () => {
-				Pagination.destroy();
-
-				if ( Splide.options.pagination ) {
-					Pagination.mount();
-					Pagination.mounted();
-				}
-			} );
-	}
-
 	/**
 	 * Update attributes.
 	 *

src/js/constants/defaults.js

@@ -327,6 +327,13 @@ export const DEFAULTS = {
 	 */
 	updateOnMove: false,
 
+	/**
+	 * Throttle duration in milliseconds for the resize event.
+	 *
+	 * @type {number}
+	 */
+	throttle: 100,
+
 	/**
 	 * Breakpoints definitions.
 	 *