Bug Fix: Root classes and active index were not updated properly.

README.md

@@ -16,7 +16,7 @@
 
 ## Features
 * Pure JavaScript without any dependencies
-* Small size, less than 28kB(11kB gzipped)
+* Small size, less than 29kB(11kB gzipped)
 * Flexible and extensible
 * Multiple slides
 * Slide or fade transition by CSS

dist/js/splide.js

@@ -1413,8 +1413,6 @@ function () {
    * @param {Object}          Components  - Optional. Components.
    */
   function Splide(root, options, Components) {
-    var _this = this;
-
     if (options === void 0) {
       options = {};
     }
@@ -1432,11 +1430,6 @@ function () {
     this._o = merge(DEFAULTS, options);
     this._i = 0;
     this._c = Components;
-    this.on('move drag', function () {
-      return _this.State.set(MOVING);
-    }).on('moved dragged', function () {
-      return _this.State.set(IDLE);
-    });
   }
   /**
    * Compose and mount components.
@@ -1451,7 +1444,7 @@ function () {
   var _proto = Splide.prototype;
 
   _proto.mount = function mount(Extensions, Transition) {
-    var _this2 = this;
+    var _this = this;
 
     if (Extensions === void 0) {
       Extensions = {};
@@ -1470,7 +1463,7 @@ function () {
         if (required === undefined || required) {
           component.mount && component.mount();
         } else {
-          delete _this2.Components[key];
+          delete _this.Components[key];
         }
       });
     } catch (e) {
@@ -1488,6 +1481,11 @@ function () {
     applyStyle(this.root, {
       visibility: 'visible'
     });
+    this.on('move drag', function () {
+      return _this.State.set(MOVING);
+    }).on('moved dragged', function () {
+      return _this.State.set(IDLE);
+    });
     return this;
   }
   /**
@@ -1642,7 +1640,7 @@ function () {
   ;
 
   _proto.destroy = function destroy(completely) {
-    var _this3 = this;
+    var _this2 = this;
 
     if (completely === void 0) {
       completely = true;
@@ -1651,7 +1649,7 @@ function () {
     // Postpone destroy because it should be done after mount.
     if (this.State.is(CREATED)) {
       this.on('ready', function () {
-        return _this3.destroy(completely);
+        return _this2.destroy(completely);
       });
       return;
     }
@@ -2117,6 +2115,12 @@ var UID_NAME = 'uid';
 
         _this.init();
       });
+      Splide.on('updated', function () {
+        removeClass(root, getClasses());
+        setTimeout(function () {
+          addClass(root, getClasses());
+        });
+      });
     },
 
     /**
@@ -2585,10 +2589,9 @@ var controller_floor = Math.floor;
   function bind() {
     Splide.on('move', function (newIndex) {
       Splide.index = newIndex;
-    }).on('updated', function (newOptions) {
-      options = newOptions;
-      var index = between(Splide.index, 0, Controller.edgeIndex);
-      Splide.index = Controller.rewind(Controller.trim(index));
+    }).on('updated refresh', function (newOptions) {
+      options = newOptions || options;
+      Splide.index = between(Splide.index, 0, Controller.edgeIndex);
     });
   }
   /**

src/js/components/controller/index.js

@@ -274,10 +274,9 @@ export default ( Splide, Components ) => {
 	function bind() {
 		Splide
 			.on( 'move', newIndex => { Splide.index = newIndex } )
-			.on( 'updated', newOptions => {
-				options = newOptions;
-				const index = between( Splide.index, 0, Controller.edgeIndex );
-				Splide.index = Controller.rewind( Controller.trim( index ) );
+			.on( 'updated refresh', newOptions => {
+				options = newOptions || options;
+				Splide.index = between( Splide.index, 0, Controller.edgeIndex );
 			} );
 	}
 

src/js/components/elements/index.js

@@ -90,6 +90,11 @@ export default ( Splide, Components ) => {
 				this.destroy();
 				this.init();
 			} );
+
+			Splide.on( 'updated', () => {
+				removeClass( root, getClasses() );
+				setTimeout( () => { addClass( root, getClasses() ) } );
+			} );
 		},
 
 		/**

src/js/splide.js

@@ -42,10 +42,6 @@ export default class Splide {
 		this._o = merge( DEFAULTS, options );
 		this._i = 0;
 		this._c = Components;
-
-		this
-			.on( 'move drag', () => this.State.set( STATES.MOVING ) )
-			.on( 'moved dragged', () => this.State.set( STATES.IDLE ) );
 	}
 
 	/**
@@ -86,6 +82,10 @@ export default class Splide {
 
 		applyStyle( this.root, { visibility: 'visible' } );
 
+		this
+			.on( 'move drag', () => this.State.set( STATES.MOVING ) )
+			.on( 'moved dragged', () => this.State.set( STATES.IDLE ) );
+
 		return this;
 	}