Bug Fix: Too early to emit `active` event on mount.

dist/js/splide.cjs.js

@@ -1798,10 +1798,21 @@ function Slide$1(Splide, index, slideIndex, slide) {
     bind(slide, 'click keydown', function (e) {
       emit(e.type === 'click' ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, _this2, e);
     });
-    on([EVENT_MOUNTED, EVENT_MOVED, EVENT_UPDATED, EVENT_RESIZED, EVENT_SCROLLED], update.bind(this));
+    on(EVENT_MOUNTED, onMounted.bind(this));
+  }
+  /**
+   * Called after all components are mounted.
+   * Updating the status on mount is too early to notify other components of the active slide.
+   */
+
+
+  function onMounted() {
+    var boundUpdate = update.bind(this);
+    boundUpdate();
+    on([EVENT_MOVED, EVENT_UPDATED, EVENT_RESIZED, EVENT_SCROLLED], boundUpdate);
 
     if (updateOnMove) {
-      on(EVENT_MOVE, onMove);
+      on(EVENT_MOVE, onMove.bind(this));
     }
   }
   /**
@@ -1860,13 +1871,11 @@ function Slide$1(Splide, index, slideIndex, slide) {
 
 
   function update() {
-    if (Components.Controller) {
-      var currIndex = Splide.index;
-      updateActivity.call(this, isActive());
-      updateVisibility.call(this, isVisible());
-      toggleClass(slide, CLASS_PREV, index === currIndex - 1);
-      toggleClass(slide, CLASS_NEXT, index === currIndex + 1);
-    }
+    var currIndex = Splide.index;
+    updateActivity.call(this, isActive());
+    updateVisibility.call(this, isVisible());
+    toggleClass(slide, CLASS_PREV, index === currIndex - 1);
+    toggleClass(slide, CLASS_NEXT, index === currIndex + 1);
   }
   /**
    * Updates the status related with activity.
@@ -1876,18 +1885,14 @@ function Slide$1(Splide, index, slideIndex, slide) {
 
 
   function updateActivity(active) {
-    toggleClass(slide, CLASS_ACTIVE, active);
+    if (active !== hasClass(slide, CLASS_ACTIVE)) {
+      toggleClass(slide, CLASS_ACTIVE, active);
 
-    if (active) {
-      if (!hasClass(slide, CLASS_ACTIVE)) {
-        isNavigation && setAttribute(slide, ARIA_CURRENT, true);
-        emit(EVENT_ACTIVE, this);
-      }
-    } else {
-      if (hasClass(slide, CLASS_ACTIVE)) {
-        removeAttribute(slide, ARIA_CURRENT);
-        emit(EVENT_INACTIVE, this);
+      if (isNavigation) {
+        setAttribute(slide, ARIA_CURRENT, active || null);
       }
+
+      emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, this);
     }
   }
   /**
@@ -1898,18 +1903,12 @@ function Slide$1(Splide, index, slideIndex, slide) {
 
 
   function updateVisibility(visible) {
-    toggleClass(slide, CLASS_VISIBLE, visible);
     setAttribute(slide, ARIA_HIDDEN, !visible || null);
     setAttribute(slide, TAB_INDEX, visible && options.slideFocus ? 0 : null);
 
-    if (visible) {
-      if (!hasClass(slide, CLASS_VISIBLE)) {
-        emit(EVENT_VISIBLE, this);
-      }
-    } else {
-      if (hasClass(slide, CLASS_VISIBLE)) {
-        emit(EVENT_HIDDEN, this);
-      }
+    if (visible !== hasClass(slide, CLASS_VISIBLE)) {
+      toggleClass(slide, CLASS_VISIBLE, visible);
+      emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, this);
     }
   }
   /**
@@ -3049,15 +3048,16 @@ function Controller(Splide, Components, options) {
    *
    * @see `Splide#go()`
    *
-   * @param control - A control pattern.
+   * @param control        - A control pattern.
+   * @param allowSameIndex - Optional. Determines whether to allow to go to the current index or not.
    */
 
 
-  function go(control) {
+  function go(control, allowSameIndex) {
     var dest = parse(control);
     var index = loop(dest);
 
-    if (index > -1 && !Move.isBusy()) {
+    if (index > -1 && !Move.isBusy() && (allowSameIndex || index !== currIndex)) {
       setIndex(index);
       Move.move(dest, index, prevIndex);
     }
@@ -3996,6 +3996,10 @@ function Drag(Splide, Components, options) {
    */
 
   var isMouse;
+  /**
+   * The target element to attach listeners.
+   */
+
   var target;
   /**
    * Indicates whether the slider exceeds borders or not.
@@ -4135,7 +4139,7 @@ function Drag(Splide, Components, options) {
       if (isFree) {
         Scroll.scroll(destination);
       } else {
-        go(computeIndex(destination));
+        go(computeIndex(destination), true);
       }
     }
 

dist/js/splide.esm.js

@@ -1793,10 +1793,21 @@ function Slide$1(Splide, index, slideIndex, slide) {
     bind(slide, 'click keydown', function (e) {
       emit(e.type === 'click' ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, _this2, e);
     });
-    on([EVENT_MOUNTED, EVENT_MOVED, EVENT_UPDATED, EVENT_RESIZED, EVENT_SCROLLED], update.bind(this));
+    on(EVENT_MOUNTED, onMounted.bind(this));
+  }
+  /**
+   * Called after all components are mounted.
+   * Updating the status on mount is too early to notify other components of the active slide.
+   */
+
+
+  function onMounted() {
+    var boundUpdate = update.bind(this);
+    boundUpdate();
+    on([EVENT_MOVED, EVENT_UPDATED, EVENT_RESIZED, EVENT_SCROLLED], boundUpdate);
 
     if (updateOnMove) {
-      on(EVENT_MOVE, onMove);
+      on(EVENT_MOVE, onMove.bind(this));
     }
   }
   /**
@@ -1855,13 +1866,11 @@ function Slide$1(Splide, index, slideIndex, slide) {
 
 
   function update() {
-    if (Components.Controller) {
-      var currIndex = Splide.index;
-      updateActivity.call(this, isActive());
-      updateVisibility.call(this, isVisible());
-      toggleClass(slide, CLASS_PREV, index === currIndex - 1);
-      toggleClass(slide, CLASS_NEXT, index === currIndex + 1);
-    }
+    var currIndex = Splide.index;
+    updateActivity.call(this, isActive());
+    updateVisibility.call(this, isVisible());
+    toggleClass(slide, CLASS_PREV, index === currIndex - 1);
+    toggleClass(slide, CLASS_NEXT, index === currIndex + 1);
   }
   /**
    * Updates the status related with activity.
@@ -1871,18 +1880,14 @@ function Slide$1(Splide, index, slideIndex, slide) {
 
 
   function updateActivity(active) {
-    toggleClass(slide, CLASS_ACTIVE, active);
+    if (active !== hasClass(slide, CLASS_ACTIVE)) {
+      toggleClass(slide, CLASS_ACTIVE, active);
 
-    if (active) {
-      if (!hasClass(slide, CLASS_ACTIVE)) {
-        isNavigation && setAttribute(slide, ARIA_CURRENT, true);
-        emit(EVENT_ACTIVE, this);
-      }
-    } else {
-      if (hasClass(slide, CLASS_ACTIVE)) {
-        removeAttribute(slide, ARIA_CURRENT);
-        emit(EVENT_INACTIVE, this);
+      if (isNavigation) {
+        setAttribute(slide, ARIA_CURRENT, active || null);
       }
+
+      emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, this);
     }
   }
   /**
@@ -1893,18 +1898,12 @@ function Slide$1(Splide, index, slideIndex, slide) {
 
 
   function updateVisibility(visible) {
-    toggleClass(slide, CLASS_VISIBLE, visible);
     setAttribute(slide, ARIA_HIDDEN, !visible || null);
     setAttribute(slide, TAB_INDEX, visible && options.slideFocus ? 0 : null);
 
-    if (visible) {
-      if (!hasClass(slide, CLASS_VISIBLE)) {
-        emit(EVENT_VISIBLE, this);
-      }
-    } else {
-      if (hasClass(slide, CLASS_VISIBLE)) {
-        emit(EVENT_HIDDEN, this);
-      }
+    if (visible !== hasClass(slide, CLASS_VISIBLE)) {
+      toggleClass(slide, CLASS_VISIBLE, visible);
+      emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, this);
     }
   }
   /**
@@ -3044,15 +3043,16 @@ function Controller(Splide, Components, options) {
    *
    * @see `Splide#go()`
    *
-   * @param control - A control pattern.
+   * @param control        - A control pattern.
+   * @param allowSameIndex - Optional. Determines whether to allow to go to the current index or not.
    */
 
 
-  function go(control) {
+  function go(control, allowSameIndex) {
     var dest = parse(control);
     var index = loop(dest);
 
-    if (index > -1 && !Move.isBusy()) {
+    if (index > -1 && !Move.isBusy() && (allowSameIndex || index !== currIndex)) {
       setIndex(index);
       Move.move(dest, index, prevIndex);
     }
@@ -3991,6 +3991,10 @@ function Drag(Splide, Components, options) {
    */
 
   var isMouse;
+  /**
+   * The target element to attach listeners.
+   */
+
   var target;
   /**
    * Indicates whether the slider exceeds borders or not.
@@ -4130,7 +4134,7 @@ function Drag(Splide, Components, options) {
       if (isFree) {
         Scroll.scroll(destination);
       } else {
-        go(computeIndex(destination));
+        go(computeIndex(destination), true);
       }
     }
 

dist/js/splide.js

@@ -1797,10 +1797,21 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       bind(slide, 'click keydown', function (e) {
         emit(e.type === 'click' ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, _this2, e);
       });
-      on([EVENT_MOUNTED, EVENT_MOVED, EVENT_UPDATED, EVENT_RESIZED, EVENT_SCROLLED], update.bind(this));
+      on(EVENT_MOUNTED, onMounted.bind(this));
+    }
+    /**
+     * Called after all components are mounted.
+     * Updating the status on mount is too early to notify other components of the active slide.
+     */
+
+
+    function onMounted() {
+      var boundUpdate = update.bind(this);
+      boundUpdate();
+      on([EVENT_MOVED, EVENT_UPDATED, EVENT_RESIZED, EVENT_SCROLLED], boundUpdate);
 
       if (updateOnMove) {
-        on(EVENT_MOVE, onMove);
+        on(EVENT_MOVE, onMove.bind(this));
       }
     }
     /**
@@ -1859,13 +1870,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 
     function update() {
-      if (Components.Controller) {
-        var currIndex = Splide.index;
-        updateActivity.call(this, isActive());
-        updateVisibility.call(this, isVisible());
-        toggleClass(slide, CLASS_PREV, index === currIndex - 1);
-        toggleClass(slide, CLASS_NEXT, index === currIndex + 1);
-      }
+      var currIndex = Splide.index;
+      updateActivity.call(this, isActive());
+      updateVisibility.call(this, isVisible());
+      toggleClass(slide, CLASS_PREV, index === currIndex - 1);
+      toggleClass(slide, CLASS_NEXT, index === currIndex + 1);
     }
     /**
      * Updates the status related with activity.

dist/types/components/Controller/Controller.d.ts

@@ -6,7 +6,7 @@ import { BaseComponent, Components, Options } from '../../types';
  * @since 3.0.0
  */
 export interface ControllerComponent extends BaseComponent {
-    go(control: number | string): void;
+    go(control: number | string, allowSameIndex?: boolean): void;
     getNext(destination?: boolean): number;
     getPrev(destination?: boolean): number;
     getEnd(): number;

dist/types/components/Controller/Controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Controller.d.ts","sourceRoot":"","sources":["Controller.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,EAAE,CAAE,OAAO,EAAE,MAAM,GAAG,MAAM,GAAI,IAAI,CAAC;IACrC,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,MAAM,IAAI,MAAM,CAAC;IACjB,QAAQ,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAChC,QAAQ,CAAE,IAAI,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACnC,OAAO,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,MAAM,CAAE,KAAK,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,mBAAmB,CA8R1G"}
+{"version":3,"file":"Controller.d.ts","sourceRoot":"","sources":["Controller.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,EAAE,CAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,cAAc,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;IAC/D,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,MAAM,IAAI,MAAM,CAAC;IACjB,QAAQ,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAChC,QAAQ,CAAE,IAAI,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACnC,OAAO,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,MAAM,CAAE,KAAK,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,mBAAmB,CA+R1G"}

dist/types/components/Drag/Drag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drag.d.ts","sourceRoot":"","sources":["Drag.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;CACnD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CA4Q9F"}
+{"version":3,"file":"Drag.d.ts","sourceRoot":"","sources":["Drag.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;CACnD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CA+Q9F"}

dist/types/components/Slides/Slide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slide.d.ts","sourceRoot":"","sources":["Slide.ts"],"names":[],"mappings":"AAiCA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAkB5C;;;;GAIG;AACH,MAAM,WAAY,cAAe,SAAQ,aAAa;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,GAAI,IAAI,CAAA;IAC1E,QAAQ,CAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAI,OAAO,CAAC;CACrD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAI,cAAc,CAmM7G"}
+{"version":3,"file":"Slide.d.ts","sourceRoot":"","sources":["Slide.ts"],"names":[],"mappings":"AAiCA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAkB5C;;;;GAIG;AACH,MAAM,WAAY,cAAe,SAAQ,aAAa;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,GAAI,IAAI,CAAA;IAC1E,QAAQ,CAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAI,OAAO,CAAC;CACrD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAI,cAAc,CAkM7G"}

dist/types/test/fixtures/html.d.ts

@@ -17,4 +17,18 @@ export interface BuildHtmlArgs {
  * @return A built HTML.
  */
 export declare function buildHtml(args?: BuildHtmlArgs): string;
+/**
+ * Generates slides.
+ *
+ * @param length     - A number of slides.
+ * @param src        - Whether to add src attribute or not.
+ * @param dataSrc    - Whether to add data-splide-lazy attribute or not.
+ * @param dataSrcset - Whether to add data-splide-lazy-srcset attribute or not.
+ *
+ * @return A built HTML.
+ */
+export declare function generateSlides(length: number, src?: boolean | string, dataSrc?: boolean | string, dataSrcset?: boolean | string): string;
+export declare const HTML_ARROWS = "\n<div class=\"splide__arrows\">\n  <button class=\"splide__arrow splide__arrow--prev\">\n    Prev\n  </button>\n\n  <button class=\"splide__arrow splide__arrow--next\">\n    Next\n  </button>\n</div>\n";
+export declare const HTML_PROGRESS = "\n<div class=\"splide__progress\">\n  <div class=\"splide__progress__bar\">\n  </div>\n</div>\n";
+export declare const HTML_AUTOPLAY = "\n<div class=\"splide__autoplay\">\n  <button class=\"splide__play\">\n    Play\n  </button>\n\n  <button class=\"splide__pause\">\n    Pause\n  </button>\n</div>\n";
 //# sourceMappingURL=../../../../src/js/test/fixtures/html.d.ts.map

dist/types/test/fixtures/html.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["html.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,aAAa;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAE,IAAI,GAAE,aAAkB,GAAI,MAAM,CA0B5D"}
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["html.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,aAAa;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAE,IAAI,GAAE,aAAkB,GAAI,MAAM,CA0B5D;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,EACd,GAAG,CAAC,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,EAC1B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,GAC5B,MAAM,CAwBR;AAED,eAAO,MAAM,WAAW,+MAUvB,CAAC;AAEF,eAAO,MAAM,aAAa,oGAKzB,CAAC;AAEF,eAAO,MAAM,aAAa,yKAUzB,CAAC"}

dist/types/types/options.d.ts

@@ -152,6 +152,10 @@ export interface Options extends ResponsiveOptions {
  * @since 3.0.0
  */
 export interface ResponsiveOptions {
+    /**
+     * Accepts arbitrary properties for extensions, although it's not ideal typing.
+     */
+    [key: string]: any;
     /**
      * Determines whether to rewind the slider or not.
      */

src/js/components/Slides/Slide.ts

@@ -95,10 +95,20 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
       emit( e.type === 'click' ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, this, e );
     } );
 
-    on( [ EVENT_MOUNTED, EVENT_MOVED, EVENT_UPDATED, EVENT_RESIZED, EVENT_SCROLLED ], update.bind( this ) );
+    on( EVENT_MOUNTED, onMounted.bind( this ) );
+  }
+
+  /**
+   * Called after all components are mounted.
+   * Updating the status on mount is too early to notify other components of the active slide.
+   */
+  function onMounted( this: SlideComponent ): void {
+    const boundUpdate = update.bind( this );
+    boundUpdate();
+    on( [ EVENT_MOVED, EVENT_UPDATED, EVENT_RESIZED, EVENT_SCROLLED ], boundUpdate );
 
     if ( updateOnMove ) {
-      on( EVENT_MOVE, onMove );
+      on( EVENT_MOVE, onMove.bind( this ) );
     }
   }
 
@@ -109,7 +119,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
    * @param prev - A previous index.
    * @param dest - A destination index.
    */
-  function onMove( next: number, prev: number, dest: number ): void {
+  function onMove( this: SlideComponent, next: number, prev: number, dest: number ): void {
     if ( dest === index ) {
       updateActivity.call( this, true );
     }
@@ -152,15 +162,13 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
    * Updates attribute and classes of the slide.
    */
   function update( this: SlideComponent ): void {
-    if ( Components.Controller ) {
-      const { index: currIndex } = Splide;
+    const { index: currIndex } = Splide;
 
-      updateActivity.call( this, isActive() );
-      updateVisibility.call( this, isVisible() );
+    updateActivity.call( this, isActive() );
+    updateVisibility.call( this, isVisible() );
 
-      toggleClass( slide, CLASS_PREV, index === currIndex - 1 );
-      toggleClass( slide, CLASS_NEXT, index === currIndex + 1 );
-    }
+    toggleClass( slide, CLASS_PREV, index === currIndex - 1 );
+    toggleClass( slide, CLASS_NEXT, index === currIndex + 1 );
   }
 
   /**

src/js/test/fixtures/html.ts

@@ -59,7 +59,7 @@ export function buildHtml( args: BuildHtmlArgs = {} ): string {
  *
  * @return A built HTML.
  */
-function generateSlides(
+export function generateSlides(
   length: number,
   src?: boolean | string,
   dataSrc?: boolean | string,
@@ -90,7 +90,7 @@ function generateSlides(
   }, '' );
 }
 
-const HTML_ARROWS = `
+export const HTML_ARROWS = `
 <div class="splide__arrows">
   <button class="splide__arrow splide__arrow--prev">
     Prev
@@ -102,14 +102,14 @@ const HTML_ARROWS = `
 </div>
 `;
 
-const HTML_PROGRESS = `
+export const HTML_PROGRESS = `
 <div class="splide__progress">
   <div class="splide__progress__bar">
   </div>
 </div>
 `;
 
-const HTML_AUTOPLAY = `
+export const HTML_AUTOPLAY = `
 <div class="splide__autoplay">
   <button class="splide__play">
     Play

src/js/types/options.ts

@@ -177,6 +177,11 @@ export interface Options extends ResponsiveOptions {
  * @since 3.0.0
  */
 export interface ResponsiveOptions {
+  /**
+   * Accepts arbitrary properties for extensions, although it's not ideal typing.
+   */
+  [ key: string ]: any;
+
   /**
    * Determines whether to rewind the slider or not.
    */