Bug Fix: The "is-active" class was not inserted the active slide when the updateOnMove option was true(#43).

README.md

@@ -128,7 +128,7 @@ Here is a list of options and brief explanations. Visit [this page](https://spli
 * **accessibility**: Whether to enable accessibility(ARIA attributes) or not.
 * **isNavigation**: Determine if a slider is navigation for another.
 * **trimSpace**: Whether to trim spaces before the fist slide or after the last one.
-* **updateOnMove**: If true, update slide status(eg. "is-active" class) before transition.
+* **updateOnMove**: If true, "is-active" class added to the slide element before transition.
 * **throttle**: Throttle duration for the resize event.
 * **breakpoints**: Breakpoints definitions.
 * **classes**: Collection of class names.

dist/js/splide.esm.js

@@ -1349,8 +1349,8 @@ var DEFAULTS = {
   trimSpace: true,
 
   /**
-   * Slide status is updated after move as default.
-   * If true, it will be updated before move.
+   * The "is-active" class is added after transition as default.
+   * If true, it will be added before move.
    *
    * @type {boolean}
    */
@@ -1926,13 +1926,20 @@ var STYLE_RESTORE_EVENTS = 'update.slide';
  */
 
 /* harmony default export */ var elements_slide = (function (Splide, index, realIndex, slide) {
+  /**
+   * Whether to update "is-active" class before or after transition.
+   *
+   * @type {boolean}
+   */
+  var updateOnMove = Splide.options.updateOnMove;
   /**
    * Events when the slide status is updated.
    * Append a namespace to remove listeners later.
    *
    * @type {string}
    */
-  var STATUS_UPDATE_EVENTS = 'ready.slide updated.slide resize.slide ' + (Splide.options.updateOnMove ? 'move.slide' : 'moved.slide');
+
+  var STATUS_UPDATE_EVENTS = 'ready.slide updated.slide resize.slide moved.slide' + (updateOnMove ? ' move.slide' : '');
   /**
    * Slide sub component object.
    *
@@ -1995,6 +2002,18 @@ var STYLE_RESTORE_EVENTS = 'update.slide';
       Splide.on(STATUS_UPDATE_EVENTS, function () {
         return _this.update();
       }).on(STYLE_RESTORE_EVENTS, restoreStyles);
+      /*
+       * Add "is-active" class to a clone element temporarily
+       * and it will be removed on "moved" event.
+       */
+
+      if (updateOnMove) {
+        Splide.on('move.slide', function () {
+          if (Splide.index === realIndex) {
+            _update(true, false);
+          }
+        });
+      }
     },
 
     /**
@@ -3205,7 +3224,7 @@ var controller_floor = Math.floor;
       var clone = cloneDeeply(elm);
       before(clone, slides[0]);
       clones.push(clone);
-      Elements.register(clone, index - count, index);
+      Elements.register(clone, index - count, length + index - count);
     });
   }
   /**
@@ -4668,13 +4687,6 @@ var UPDATE_EVENT = 'updated.page refresh.page';
    */
 
   var Pagination = {
-    /**
-     * Required only when the pagination option is true.
-     *
-     * @type {boolean}
-     */
-    // required: Splide.options.pagination,
-
     /**
      * Called when the component is mounted.
      */
@@ -5707,8 +5719,8 @@ var THROTTLE = 50;
 var COMPLETE = {
   Options: components_options,
   Breakpoints: components_breakpoints,
-  Elements: components_elements,
   Controller: controller,
+  Elements: components_elements,
   Track: components_track,
   Clones: components_clones,
   Layout: layout,

dist/js/splide.js

@@ -1339,8 +1339,8 @@ var DEFAULTS = {
   trimSpace: true,
 
   /**
-   * Slide status is updated after move as default.
-   * If true, it will be updated before move.
+   * The "is-active" class is added after transition as default.
+   * If true, it will be added before move.
    *
    * @type {boolean}
    */
@@ -1916,13 +1916,20 @@ var STYLE_RESTORE_EVENTS = 'update.slide';
  */
 
 /* harmony default export */ var elements_slide = (function (Splide, index, realIndex, slide) {
+  /**
+   * Whether to update "is-active" class before or after transition.
+   *
+   * @type {boolean}
+   */
+  var updateOnMove = Splide.options.updateOnMove;
   /**
    * Events when the slide status is updated.
    * Append a namespace to remove listeners later.
    *
    * @type {string}
    */
-  var STATUS_UPDATE_EVENTS = 'ready.slide updated.slide resize.slide ' + (Splide.options.updateOnMove ? 'move.slide' : 'moved.slide');
+
+  var STATUS_UPDATE_EVENTS = 'ready.slide updated.slide resize.slide moved.slide' + (updateOnMove ? ' move.slide' : '');
   /**
    * Slide sub component object.
    *
@@ -1985,6 +1992,18 @@ var STYLE_RESTORE_EVENTS = 'update.slide';
       Splide.on(STATUS_UPDATE_EVENTS, function () {
         return _this.update();
       }).on(STYLE_RESTORE_EVENTS, restoreStyles);
+      /*
+       * Add "is-active" class to a clone element temporarily
+       * and it will be removed on "moved" event.
+       */
+
+      if (updateOnMove) {
+        Splide.on('move.slide', function () {
+          if (Splide.index === realIndex) {
+            _update(true, false);
+          }
+        });
+      }
     },
 
     /**
@@ -3195,7 +3214,7 @@ var controller_floor = Math.floor;
       var clone = cloneDeeply(elm);
       before(clone, slides[0]);
       clones.push(clone);
-      Elements.register(clone, index - count, index);
+      Elements.register(clone, index - count, length + index - count);
     });
   }
   /**
@@ -4658,13 +4677,6 @@ var UPDATE_EVENT = 'updated.page refresh.page';
    */
 
   var Pagination = {
-    /**
-     * Required only when the pagination option is true.
-     *
-     * @type {boolean}
-     */
-    // required: Splide.options.pagination,
-
     /**
      * Called when the component is mounted.
      */
@@ -5697,8 +5709,8 @@ var THROTTLE = 50;
 var COMPLETE = {
   Options: components_options,
   Breakpoints: components_breakpoints,
-  Elements: components_elements,
   Controller: controller,
+  Elements: components_elements,
   Track: components_track,
   Clones: components_clones,
   Layout: layout,

src/js/components/clones/index.js

@@ -109,7 +109,7 @@ export default ( Splide, Components ) => {
 			before( clone, slides[0] );
 			clones.push( clone );
 
-			Elements.register( clone, index - count, index );
+			Elements.register( clone, index - count, length + index - count );
 		} );
 	}
 

src/js/components/elements/slide.js

@@ -31,14 +31,21 @@ const STYLE_RESTORE_EVENTS = 'update.slide';
  * @return {Object} - The sub component object.
  */
 export default ( Splide, index, realIndex, slide ) => {
+	/**
+	 * Whether to update "is-active" class before or after transition.
+	 *
+	 * @type {boolean}
+	 */
+	const updateOnMove = Splide.options.updateOnMove;
+
 	/**
 	 * Events when the slide status is updated.
 	 * Append a namespace to remove listeners later.
 	 *
 	 * @type {string}
 	 */
-	const STATUS_UPDATE_EVENTS = 'ready.slide updated.slide resize.slide '
-		+ ( Splide.options.updateOnMove ? 'move.slide' : 'moved.slide' );
+	const STATUS_UPDATE_EVENTS = 'ready.slide updated.slide resize.slide moved.slide'
+		+ ( updateOnMove ? ' move.slide' : '' );
 
 	/**
 	 * Slide sub component object.
@@ -99,6 +106,18 @@ export default ( Splide, index, realIndex, slide ) => {
 			Splide
 				.on( STATUS_UPDATE_EVENTS, () => this.update() )
 				.on( STYLE_RESTORE_EVENTS, restoreStyles );
+
+			/*
+			 * Add "is-active" class to a clone element temporarily
+			 * and it will be removed on "moved" event.
+			 */
+			if ( updateOnMove ) {
+				Splide.on( 'move.slide', () => {
+					if ( Splide.index === realIndex ) {
+						update( true, false );
+					}
+				} );
+			}
 		},
 
 		/**

src/js/components/index.js

@@ -26,8 +26,8 @@ import Breakpoints from './breakpoints';
 export const COMPLETE = {
 	Options,
 	Breakpoints,
-	Elements,
 	Controller,
+	Elements,
 	Track,
 	Clones,
 	Layout,

src/js/constants/defaults.js

@@ -320,8 +320,8 @@ export const DEFAULTS = {
 	trimSpace: true,
 
 	/**
-	 * Slide status is updated after move as default.
-	 * If true, it will be updated before move.
+	 * The "is-active" class is added after transition as default.
+	 * If true, it will be added before move.
 	 *
 	 * @type {boolean}
 	 */