Add the `is-active` class to clones.

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.5.3
+ * Version  : 3.5.4
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -375,6 +375,7 @@ const EVENT_MOUNTED = "mounted";
 const EVENT_READY = "ready";
 const EVENT_MOVE = "move";
 const EVENT_MOVED = "moved";
+const EVENT_SHIFTED = "shifted";
 const EVENT_CLICK = "click";
 const EVENT_ACTIVE = "active";
 const EVENT_INACTIVE = "inactive";
@@ -790,12 +791,12 @@ function Slide$1(Splide2, index, slideIndex, slide) {
       slide.id = `${root.id}-slide${pad(index + 1)}`;
     }
     bind(slide, "click keydown", (e) => {
-      emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, this, e);
+      emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, self, e);
     });
-    on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], update.bind(this));
-    on(EVENT_NAVIGATION_MOUNTED, initNavigation.bind(this));
+    on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_SHIFTED, EVENT_MOVED, EVENT_SCROLLED], update);
+    on(EVENT_NAVIGATION_MOUNTED, initNavigation);
     if (updateOnMove) {
-      on(EVENT_MOVE, onMove.bind(this));
+      on(EVENT_MOVE, onMove);
     }
   }
   function destroy() {
@@ -812,21 +813,18 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     setAttribute(slide, ARIA_LABEL, label);
     setAttribute(slide, ARIA_CONTROLS, controls);
     setAttribute(slide, ROLE, "menuitem");
-    updateActivity.call(this, isActive());
+    updateActivity(isActive());
   }
-  function onMove(next, prev, dest) {
+  function onMove() {
     if (!destroyed) {
-      update.call(this);
-      if (dest === index) {
-        updateActivity.call(this, true);
-      }
+      update();
     }
   }
   function update() {
     if (!destroyed) {
       const { index: currIndex } = Splide2;
-      updateActivity.call(this, isActive());
-      updateVisibility.call(this, isVisible());
+      updateActivity(isActive());
+      updateVisibility(isVisible());
       toggleClass(slide, CLASS_PREV, index === currIndex - 1);
       toggleClass(slide, CLASS_NEXT, index === currIndex + 1);
     }
@@ -837,7 +835,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
       if (isNavigation) {
         setAttribute(slide, ARIA_CURRENT, active || null);
       }
-      emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, this);
+      emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, self);
     }
   }
   function updateVisibility(visible) {
@@ -851,14 +849,15 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     }
     if (visible !== hasClass(slide, CLASS_VISIBLE)) {
       toggleClass(slide, CLASS_VISIBLE, visible);
-      emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, this);
+      !isClone && emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
     }
   }
   function style$1(prop, value, useContainer) {
     style(useContainer && container || slide, prop, value);
   }
   function isActive() {
-    return Splide2.index === index;
+    const { index: curr } = Splide2;
+    return curr === index || options.cloneStatus && curr === slideIndex;
   }
   function isVisible() {
     if (Splide2.is(FADE)) {
@@ -877,7 +876,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     }
     return diff <= distance;
   }
-  return {
+  const self = {
     index,
     slideIndex,
     slide,
@@ -889,6 +888,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     style: style$1,
     isWithin
   };
+  return self;
 }
 
 function Slides(Splide2, Components2, options) {
@@ -1203,6 +1203,7 @@ function Move(Splide2, Components2, options) {
       if (dest !== index) {
         Transition.cancel();
         translate(shift(position, dest > index), true);
+        emit(EVENT_SHIFTED);
       }
       set(MOVING);
       emit(EVENT_MOVE, index, prev, dest);
@@ -1222,7 +1223,9 @@ function Move(Splide2, Components2, options) {
   }
   function translate(position, preventLoop) {
     if (!Splide2.is(FADE)) {
-      list.style.transform = `translate${resolve("X")}(${preventLoop ? position : loop(position)}px)`;
+      const destination = preventLoop ? position : loop(position);
+      list.style.transform = `translate${resolve("X")}(${destination}px)`;
+      position !== destination && emit(EVENT_SHIFTED);
     }
   }
   function loop(position) {
@@ -1390,7 +1393,7 @@ function Controller(Splide2, Components2, options) {
           dest = toIndex(toPage(dest));
         } else {
           if (isLoop) {
-            dest = perMove ? dest : dest < 0 ? -(slideCount % perPage || perPage) : slideCount;
+            dest = perMove || hasFocus() ? dest : dest < 0 ? -(slideCount % perPage || perPage) : slideCount;
           } else if (options.rewind) {
             dest = dest < 0 ? end : 0;
           } else {
@@ -2258,6 +2261,7 @@ const DEFAULTS = {
   speed: 400,
   waitForTransition: true,
   perPage: 1,
+  cloneStatus: true,
   arrows: true,
   pagination: true,
   interval: 5e3,
@@ -2880,6 +2884,7 @@ exports.EVENT_RESIZE = EVENT_RESIZE;
 exports.EVENT_RESIZED = EVENT_RESIZED;
 exports.EVENT_SCROLL = EVENT_SCROLL;
 exports.EVENT_SCROLLED = EVENT_SCROLLED;
+exports.EVENT_SHIFTED = EVENT_SHIFTED;
 exports.EVENT_SLIDE_KEYDOWN = EVENT_SLIDE_KEYDOWN;
 exports.EVENT_UPDATED = EVENT_UPDATED;
 exports.EVENT_VISIBLE = EVENT_VISIBLE;

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.5.3
+ * Version  : 3.5.4
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -371,6 +371,7 @@ const EVENT_MOUNTED = "mounted";
 const EVENT_READY = "ready";
 const EVENT_MOVE = "move";
 const EVENT_MOVED = "moved";
+const EVENT_SHIFTED = "shifted";
 const EVENT_CLICK = "click";
 const EVENT_ACTIVE = "active";
 const EVENT_INACTIVE = "inactive";
@@ -786,12 +787,12 @@ function Slide$1(Splide2, index, slideIndex, slide) {
       slide.id = `${root.id}-slide${pad(index + 1)}`;
     }
     bind(slide, "click keydown", (e) => {
-      emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, this, e);
+      emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, self, e);
     });
-    on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], update.bind(this));
-    on(EVENT_NAVIGATION_MOUNTED, initNavigation.bind(this));
+    on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_SHIFTED, EVENT_MOVED, EVENT_SCROLLED], update);
+    on(EVENT_NAVIGATION_MOUNTED, initNavigation);
     if (updateOnMove) {
-      on(EVENT_MOVE, onMove.bind(this));
+      on(EVENT_MOVE, onMove);
     }
   }
   function destroy() {
@@ -808,21 +809,18 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     setAttribute(slide, ARIA_LABEL, label);
     setAttribute(slide, ARIA_CONTROLS, controls);
     setAttribute(slide, ROLE, "menuitem");
-    updateActivity.call(this, isActive());
+    updateActivity(isActive());
   }
-  function onMove(next, prev, dest) {
+  function onMove() {
     if (!destroyed) {
-      update.call(this);
-      if (dest === index) {
-        updateActivity.call(this, true);
-      }
+      update();
     }
   }
   function update() {
     if (!destroyed) {
       const { index: currIndex } = Splide2;
-      updateActivity.call(this, isActive());
-      updateVisibility.call(this, isVisible());
+      updateActivity(isActive());
+      updateVisibility(isVisible());
       toggleClass(slide, CLASS_PREV, index === currIndex - 1);
       toggleClass(slide, CLASS_NEXT, index === currIndex + 1);
     }
@@ -833,7 +831,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
       if (isNavigation) {
         setAttribute(slide, ARIA_CURRENT, active || null);
       }
-      emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, this);
+      emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, self);
     }
   }
   function updateVisibility(visible) {
@@ -847,14 +845,15 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     }
     if (visible !== hasClass(slide, CLASS_VISIBLE)) {
       toggleClass(slide, CLASS_VISIBLE, visible);
-      emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, this);
+      !isClone && emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
     }
   }
   function style$1(prop, value, useContainer) {
     style(useContainer && container || slide, prop, value);
   }
   function isActive() {
-    return Splide2.index === index;
+    const { index: curr } = Splide2;
+    return curr === index || options.cloneStatus && curr === slideIndex;
   }
   function isVisible() {
     if (Splide2.is(FADE)) {
@@ -873,7 +872,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     }
     return diff <= distance;
   }
-  return {
+  const self = {
     index,
     slideIndex,
     slide,
@@ -885,6 +884,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     style: style$1,
     isWithin
   };
+  return self;
 }
 
 function Slides(Splide2, Components2, options) {
@@ -1199,6 +1199,7 @@ function Move(Splide2, Components2, options) {
       if (dest !== index) {
         Transition.cancel();
         translate(shift(position, dest > index), true);
+        emit(EVENT_SHIFTED);
       }
       set(MOVING);
       emit(EVENT_MOVE, index, prev, dest);
@@ -1218,7 +1219,9 @@ function Move(Splide2, Components2, options) {
   }
   function translate(position, preventLoop) {
     if (!Splide2.is(FADE)) {
-      list.style.transform = `translate${resolve("X")}(${preventLoop ? position : loop(position)}px)`;
+      const destination = preventLoop ? position : loop(position);
+      list.style.transform = `translate${resolve("X")}(${destination}px)`;
+      position !== destination && emit(EVENT_SHIFTED);
     }
   }
   function loop(position) {
@@ -1386,7 +1389,7 @@ function Controller(Splide2, Components2, options) {
           dest = toIndex(toPage(dest));
         } else {
           if (isLoop) {
-            dest = perMove ? dest : dest < 0 ? -(slideCount % perPage || perPage) : slideCount;
+            dest = perMove || hasFocus() ? dest : dest < 0 ? -(slideCount % perPage || perPage) : slideCount;
           } else if (options.rewind) {
             dest = dest < 0 ? end : 0;
           } else {
@@ -2254,6 +2257,7 @@ const DEFAULTS = {
   speed: 400,
   waitForTransition: true,
   perPage: 1,
+  cloneStatus: true,
   arrows: true,
   pagination: true,
   interval: 5e3,
@@ -2823,4 +2827,4 @@ class SplideRenderer {
   }
 }
 
-export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_AUTOPLAY, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PAUSE, CLASS_PLAY, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SLIDER, CLASS_SPINNER, CLASS_TRACK, CLASS_VISIBLE, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, EventBus, EventInterface, RequestInterval, STATUS_CLASSES, Splide, SplideRenderer, State, Throttle, Splide as default };
+export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_AUTOPLAY, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PAUSE, CLASS_PLAY, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SLIDER, CLASS_SPINNER, CLASS_TRACK, CLASS_VISIBLE, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, EventBus, EventInterface, RequestInterval, STATUS_CLASSES, Splide, SplideRenderer, State, Throttle, Splide as default };

dist/js/splide.js

@@ -418,6 +418,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var EVENT_READY = "ready";
   var EVENT_MOVE = "move";
   var EVENT_MOVED = "moved";
+  var EVENT_SHIFTED = "shifted";
   var EVENT_CLICK = "click";
   var EVENT_ACTIVE = "active";
   var EVENT_INACTIVE = "inactive";
@@ -885,20 +886,18 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var destroyed;
 
     function mount() {
-      var _this2 = this;
-
       if (!isClone) {
         slide.id = root.id + "-slide" + pad(index + 1);
       }
 
       bind(slide, "click keydown", function (e) {
-        emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, _this2, e);
+        emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, self, e);
       });
-      on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], update.bind(this));
-      on(EVENT_NAVIGATION_MOUNTED, initNavigation.bind(this));
+      on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_SHIFTED, EVENT_MOVED, EVENT_SCROLLED], update);
+      on(EVENT_NAVIGATION_MOUNTED, initNavigation);
 
       if (updateOnMove) {
-        on(EVENT_MOVE, onMove.bind(this));
+        on(EVENT_MOVE, onMove);
       }
     }
 
@@ -919,24 +918,20 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       setAttribute(slide, ARIA_LABEL, label);
       setAttribute(slide, ARIA_CONTROLS, controls);
       setAttribute(slide, ROLE, "menuitem");
-      updateActivity.call(this, isActive());
+      updateActivity(isActive());
     }
 
-    function onMove(next, prev, dest) {
+    function onMove() {
       if (!destroyed) {
-        update.call(this);
-
-        if (dest === index) {
-          updateActivity.call(this, true);
-        }
+        update();
       }
     }
 
     function update() {
       if (!destroyed) {
         var currIndex = Splide2.index;
-        updateActivity.call(this, isActive());
-        updateVisibility.call(this, isVisible());
+        updateActivity(isActive());
+        updateVisibility(isVisible());
         toggleClass(slide, CLASS_PREV, index === currIndex - 1);
         toggleClass(slide, CLASS_NEXT, index === currIndex + 1);
       }
@@ -950,7 +945,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
           setAttribute(slide, ARIA_CURRENT, active || null);
         }
 
-        emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, this);
+        emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, self);
       }
     }
 
@@ -967,7 +962,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
       if (visible !== hasClass(slide, CLASS_VISIBLE)) {
         toggleClass(slide, CLASS_VISIBLE, visible);
-        emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, this);
+        emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);
       }
     }
 
@@ -976,7 +971,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function isActive() {
-      return Splide2.index === index;
+      var curr = Splide2.index;
+      return curr === index || options.cloneStatus && curr === slideIndex;
     }
 
     function isVisible() {
@@ -1001,7 +997,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       return diff <= distance;
     }
 
-    return {
+    var self = {
       index: index,
       slideIndex: slideIndex,
       slide: slide,
@@ -1013,6 +1009,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       style: style$1,
       isWithin: isWithin
     };
+    return self;
   }
 
   function Slides(Splide2, Components2, options) {
@@ -1426,6 +1423,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         if (dest !== index) {
           Transition.cancel();
           translate(shift(position, dest > index), true);
+          emit(EVENT_SHIFTED);
         }
 
         set(MOVING);
@@ -1449,7 +1447,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function translate(position, preventLoop) {
       if (!Splide2.is(FADE)) {
-        list.style.transform = "translate" + resolve("X") + "(" + (preventLoop ? position : loop(position)) + "px)";
+        var destination = preventLoop ? position : loop(position);
+        list.style.transform = "translate" + resolve("X") + "(" + destination + "px)";
+        position !== destination && emit(EVENT_SHIFTED);
       }
     }
 
@@ -1659,7 +1659,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
             dest = toIndex(toPage(dest));
           } else {
             if (isLoop) {
-              dest = perMove ? dest : dest < 0 ? -(slideCount % perPage || perPage) : slideCount;
+              dest = perMove || hasFocus() ? dest : dest < 0 ? -(slideCount % perPage || perPage) : slideCount;
             } else if (options.rewind) {
               dest = dest < 0 ? end : 0;
             } else {
@@ -2751,6 +2751,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     speed: 400,
     waitForTransition: true,
     perPage: 1,
+    cloneStatus: true,
     arrows: true,
     pagination: true,
     interval: 5e3,
@@ -2876,7 +2877,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var _proto = _Splide.prototype;
 
     _proto.mount = function mount(Extensions, Transition) {
-      var _this3 = this;
+      var _this2 = this;
 
       var state = this.state,
           Components2 = this.Components;
@@ -2889,7 +2890,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         Transition: this._Transition
       });
       forOwn(Constructors, function (Component, key) {
-        var component = Component(_this3, Components2, _this3._options);
+        var component = Component(_this2, Components2, _this2._options);
         Components2[key] = component;
         component.setup && component.setup();
       });

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

@@ -1 +1 @@
-{"version":3,"file":"Move.d.ts","sourceRoot":"","sources":["Move.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,aAAa,CAAC;AAInG;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,IAAI,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IAChF,IAAI,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAC5B,SAAS,CAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;IAC3D,KAAK,CAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,GAAI,MAAM,CAAC;IACtD,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,CAAE,QAAQ,EAAE,MAAM,GAAI,MAAM,CAAC;IACpC,UAAU,CAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACxD,WAAW,IAAI,MAAM,CAAC;IACtB,QAAQ,CAAE,GAAG,EAAE,OAAO,GAAI,MAAM,CAAC;IACjC,MAAM,IAAI,OAAO,CAAC;IAClB,aAAa,CAAE,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,OAAO,CAAC;CACxE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAuQ9F"}
+{"version":3,"file":"Move.d.ts","sourceRoot":"","sources":["Move.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,aAAa,CAAC;AAInG;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,IAAI,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IAChF,IAAI,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAC5B,SAAS,CAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;IAC3D,KAAK,CAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,GAAI,MAAM,CAAC;IACtD,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,CAAE,QAAQ,EAAE,MAAM,GAAI,MAAM,CAAC;IACpC,UAAU,CAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACxD,WAAW,IAAI,MAAM,CAAC;IACtB,QAAQ,CAAE,GAAG,EAAE,OAAO,GAAI,MAAM,CAAC;IACjC,MAAM,IAAI,OAAO,CAAC;IAClB,aAAa,CAAE,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,OAAO,CAAC;CACxE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CA0Q9F"}

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

@@ -1 +1 @@
-{"version":3,"file":"Slide.d.ts","sourceRoot":"","sources":["Slide.ts"],"names":[],"mappings":"AAgCA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAqB5C;;;;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,MAAM,IAAI,IAAI,CAAC;IACf,KAAK,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,GAAI,IAAI,CAAA;IAC3E,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,CAyM7G"}
+{"version":3,"file":"Slide.d.ts","sourceRoot":"","sources":["Slide.ts"],"names":[],"mappings":"AAkCA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAqB5C;;;;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,MAAM,IAAI,IAAI,CAAC;IACf,KAAK,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,GAAI,IAAI,CAAA;IAC3E,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,CAoM7G"}

dist/types/constants/defaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAKnC;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,OAmBtB,CAAC"}
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAKnC;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,OAoBtB,CAAC"}

dist/types/constants/events.d.ts

@@ -2,6 +2,7 @@ export declare const EVENT_MOUNTED = "mounted";
 export declare const EVENT_READY = "ready";
 export declare const EVENT_MOVE = "move";
 export declare const EVENT_MOVED = "moved";
+export declare const EVENT_SHIFTED = "shifted";
 export declare const EVENT_CLICK = "click";
 export declare const EVENT_ACTIVE = "active";
 export declare const EVENT_INACTIVE = "inactive";

dist/types/constants/events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["events.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,WAAW,UAAuB,CAAC;AAChD,eAAO,MAAM,UAAU,SAAuB,CAAC;AAC/C,eAAO,MAAM,WAAW,UAAuB,CAAC;AAChD,eAAO,MAAM,WAAW,UAAuB,CAAC;AAChD,eAAO,MAAM,YAAY,WAAuB,CAAC;AACjD,eAAO,MAAM,cAAc,aAAuB,CAAC;AACnD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,YAAY,WAAuB,CAAC;AACjD,eAAO,MAAM,mBAAmB,kBAAuB,CAAC;AACxD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,YAAY,WAAuB,CAAC;AACjD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,kBAAkB,iBAAuB,CAAC;AACvD,eAAO,MAAM,UAAU,SAAuB,CAAC;AAC/C,eAAO,MAAM,cAAc,aAAuB,CAAC;AACnD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,YAAY,WAAuB,CAAC;AACjD,eAAO,MAAM,cAAc,aAAuB,CAAC;AACnD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,oBAAoB,mBAAuB,CAAC;AACzD,eAAO,MAAM,oBAAoB,mBAAuB,CAAC;AACzD,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,mBAAmB,kBAAuB,CAAC;AACxD,eAAO,MAAM,sBAAsB,qBAAuB,CAAC;AAC3D,eAAO,MAAM,oBAAoB,mBAAuB,CAAC;AACzD,eAAO,MAAM,qBAAqB,oBAAuB,CAAC"}
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["events.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,WAAW,UAAuB,CAAC;AAChD,eAAO,MAAM,UAAU,SAAuB,CAAC;AAC/C,eAAO,MAAM,WAAW,UAAuB,CAAC;AAChD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,WAAW,UAAuB,CAAC;AAChD,eAAO,MAAM,YAAY,WAAuB,CAAC;AACjD,eAAO,MAAM,cAAc,aAAuB,CAAC;AACnD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,YAAY,WAAuB,CAAC;AACjD,eAAO,MAAM,mBAAmB,kBAAuB,CAAC;AACxD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,YAAY,WAAuB,CAAC;AACjD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,kBAAkB,iBAAuB,CAAC;AACvD,eAAO,MAAM,UAAU,SAAuB,CAAC;AAC/C,eAAO,MAAM,cAAc,aAAuB,CAAC;AACnD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,YAAY,WAAuB,CAAC;AACjD,eAAO,MAAM,cAAc,aAAuB,CAAC;AACnD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,oBAAoB,mBAAuB,CAAC;AACzD,eAAO,MAAM,oBAAoB,mBAAuB,CAAC;AACzD,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,mBAAmB,kBAAuB,CAAC;AACxD,eAAO,MAAM,sBAAsB,qBAAuB,CAAC;AAC3D,eAAO,MAAM,oBAAoB,mBAAuB,CAAC;AACzD,eAAO,MAAM,qBAAqB,oBAAuB,CAAC"}

dist/types/types/events.d.ts

@@ -8,6 +8,7 @@ export interface EventMap {
     'click': (Slide: SlideComponent, e: MouseEvent) => void;
     'move': (index: number, prev: number, dest: number) => void;
     'moved': (index: number, prev: number, dest: number) => void;
+    'shifted': () => void;
     'active': (Slide: SlideComponent) => void;
     'inactive': (Slide: SlideComponent) => void;
     'visible': (Slide: SlideComponent) => void;

dist/types/types/events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["events.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,MAAM,WAAW,QAAQ;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,CAAE,KAAK,EAAE,cAAc,EAAE,CAAC,EAAE,UAAU,KAAM,IAAI,CAAC;IAC1D,MAAM,EAAE,CAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;IAC9D,OAAO,EAAE,CAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;IAC/D,QAAQ,EAAE,CAAE,KAAK,EAAE,cAAc,KAAM,IAAI,CAAC;IAC5C,UAAU,EAAE,CAAE,KAAK,EAAE,cAAc,KAAM,IAAI,CAAC;IAC9C,SAAS,EAAE,CAAE,KAAK,EAAE,cAAc,KAAM,IAAI,CAAC;IAC7C,QAAQ,EAAE,CAAE,KAAK,EAAE,cAAc,KAAM,IAAI,CAAC;IAC5C,eAAe,EAAE,CAAE,KAAK,EAAE,cAAc,EAAE,CAAC,EAAE,aAAa,KAAM,IAAI,CAAC;IACrE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,CAAE,OAAO,EAAE,OAAO,KAAM,IAAI,CAAC;IACxC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,gBAAgB,EAAE,CAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,KAAM,IAAI,CAAC;IAC/E,gBAAgB,EAAE,CAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAM,IAAI,CAAC;IACrH,oBAAoB,EAAE,CAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,cAAc,KAAM,IAAI,CAAC;IAC7E,oBAAoB,EAAE,CAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,cAAc,KAAM,IAAI,CAAC;IACnG,oBAAoB,EAAE,CAAE,OAAO,EAAE,MAAM,EAAE,KAAM,IAAI,CAAC;IACpD,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,kBAAkB,EAAE,CAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;IAC7C,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB,EAAE,CAAE,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,cAAc,KAAM,IAAI,CAAC;CAC7E"}
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["events.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,MAAM,WAAW,QAAQ;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,CAAE,KAAK,EAAE,cAAc,EAAE,CAAC,EAAE,UAAU,KAAM,IAAI,CAAC;IAC1D,MAAM,EAAE,CAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;IAC9D,OAAO,EAAE,CAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;IAC/D,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAE,KAAK,EAAE,cAAc,KAAM,IAAI,CAAC;IAC5C,UAAU,EAAE,CAAE,KAAK,EAAE,cAAc,KAAM,IAAI,CAAC;IAC9C,SAAS,EAAE,CAAE,KAAK,EAAE,cAAc,KAAM,IAAI,CAAC;IAC7C,QAAQ,EAAE,CAAE,KAAK,EAAE,cAAc,KAAM,IAAI,CAAC;IAC5C,eAAe,EAAE,CAAE,KAAK,EAAE,cAAc,EAAE,CAAC,EAAE,aAAa,KAAM,IAAI,CAAC;IACrE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,CAAE,OAAO,EAAE,OAAO,KAAM,IAAI,CAAC;IACxC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,gBAAgB,EAAE,CAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,KAAM,IAAI,CAAC;IAC/E,gBAAgB,EAAE,CAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAM,IAAI,CAAC;IACrH,oBAAoB,EAAE,CAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,cAAc,KAAM,IAAI,CAAC;IAC7E,oBAAoB,EAAE,CAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,cAAc,KAAM,IAAI,CAAC;IACnG,oBAAoB,EAAE,CAAE,OAAO,EAAE,MAAM,EAAE,KAAM,IAAI,CAAC;IACpD,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,kBAAkB,EAAE,CAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;IAC7C,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB,EAAE,CAAE,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,cAAc,KAAM,IAAI,CAAC;CAC7E"}

dist/types/types/options.d.ts

@@ -221,6 +221,10 @@ export interface ResponsiveOptions {
      * In most cases, you don't need to provide this value.
      */
     clones?: number;
+    /**
+     * Determines whether to clone status classes for clones or not.
+     */
+    cloneStatus?: boolean;
     /**
      * Determines which slide should be active if there are multiple slides in a page.
      * Numbers and `'center'` are acceptable.

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.5.3",
+  "version": "3.5.4",
   "description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

src/js/components/Controller/Controller.ts

@@ -232,7 +232,7 @@ export function Controller( Splide: Splide, Components: Components, options: Opt
           dest = toIndex( toPage( dest ) );
         } else {
           if ( isLoop ) {
-            dest = perMove
+            dest = perMove || hasFocus()
               ? dest
               : dest < 0 ? - ( slideCount % perPage || perPage ) : slideCount;
           } else if ( options.rewind ) {

src/js/components/Move/Move.ts

@@ -5,6 +5,7 @@ import {
   EVENT_REFRESH,
   EVENT_REPOSITIONED,
   EVENT_RESIZED,
+  EVENT_SHIFTED,
   EVENT_UPDATED,
 } from '../../constants/events';
 import { IDLE, MOVING } from '../../constants/states';
@@ -101,6 +102,7 @@ export function Move( Splide: Splide, Components: Components, options: Options )
       if ( dest !== index ) {
         Transition.cancel();
         translate( shift( position, dest > index ), true );
+        emit( EVENT_SHIFTED );
       }
 
       set( MOVING );
@@ -136,7 +138,9 @@ export function Move( Splide: Splide, Components: Components, options: Options )
    */
   function translate( position: number, preventLoop?: boolean ): void {
     if ( ! Splide.is( FADE ) ) {
-      list.style.transform = `translate${ resolve( 'X' ) }(${ preventLoop ? position : loop( position ) }px)`;
+      const destination = preventLoop ? position : loop( position );
+      list.style.transform = `translate${ resolve( 'X' ) }(${ destination }px)`;
+      position !== destination && emit( EVENT_SHIFTED );
     }
   }
 

src/js/components/Slides/Slide.ts

@@ -21,10 +21,12 @@ import {
   EVENT_HIDDEN,
   EVENT_INACTIVE,
   EVENT_MOVE,
-  EVENT_MOVED, EVENT_NAVIGATION_MOUNTED,
+  EVENT_MOVED,
+  EVENT_NAVIGATION_MOUNTED,
   EVENT_REFRESH,
   EVENT_REPOSITIONED,
   EVENT_SCROLLED,
+  EVENT_SHIFTED,
   EVENT_SLIDE_KEYDOWN,
   EVENT_VISIBLE,
 } from '../../constants/events';
@@ -104,14 +106,14 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
     }
 
     bind( slide, 'click keydown', e => {
-      emit( e.type === 'click' ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, this, e );
+      emit( e.type === 'click' ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, self, e );
     } );
 
-    on( [ EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED ], update.bind( this ) );
-    on( EVENT_NAVIGATION_MOUNTED, initNavigation.bind( this ) );
+    on( [ EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_SHIFTED, EVENT_MOVED, EVENT_SCROLLED ], update );
+    on( EVENT_NAVIGATION_MOUNTED, initNavigation );
 
     if ( updateOnMove ) {
-      on( EVENT_MOVE, onMove.bind( this ) );
+      on( EVENT_MOVE, onMove );
     }
   }
 
@@ -129,7 +131,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
   /**
    * Initializes slides as navigation.
    */
-  function initNavigation( this: SlideComponent ): void {
+  function initNavigation(): void {
     const idx      = isClone ? slideIndex : index;
     const label    = format( options.i18n.slideX, idx + 1 );
     const controls = Splide.splides.map( target => target.splide.root.id ).join( ' ' );
@@ -138,35 +140,27 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
     setAttribute( slide, ARIA_CONTROLS, controls );
     setAttribute( slide, ROLE, 'menuitem' );
 
-    updateActivity.call( this, isActive() );
+    updateActivity( isActive() );
   }
 
   /**
    * If the `updateOnMove` option is `true`, called when the slider starts moving.
-   *
-   * @param next - A next index.
-   * @param prev - A previous index.
-   * @param dest - A destination index.
    */
-  function onMove( this: SlideComponent, next: number, prev: number, dest: number ): void {
+  function onMove(): void {
     if ( ! destroyed ) {
-      update.call( this );
-
-      if ( dest === index ) {
-        updateActivity.call( this, true );
-      }
+      update();
     }
   }
 
   /**
    * Updates attribute and classes of the slide.
    */
-  function update( this: SlideComponent ): void {
+  function update(): void {
     if ( ! destroyed ) {
       const { index: currIndex } = Splide;
 
-      updateActivity.call( this, isActive() );
-      updateVisibility.call( this, isVisible() );
+      updateActivity( isActive() );
+      updateVisibility( isVisible() );
 
       toggleClass( slide, CLASS_PREV, index === currIndex - 1 );
       toggleClass( slide, CLASS_NEXT, index === currIndex + 1 );
@@ -178,7 +172,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
    *
    * @param active - Set `true` if the slide is active.
    */
-  function updateActivity( this: SlideComponent, active: boolean ): void {
+  function updateActivity( active: boolean ): void {
     if ( active !== hasClass( slide, CLASS_ACTIVE ) ) {
       toggleClass( slide, CLASS_ACTIVE, active );
 
@@ -186,7 +180,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
         setAttribute( slide, ARIA_CURRENT, active || null );
       }
 
-      emit( active ? EVENT_ACTIVE : EVENT_INACTIVE, this );
+      emit( active ? EVENT_ACTIVE : EVENT_INACTIVE, self );
     }
   }
 
@@ -195,7 +189,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
    *
    * @param visible - Set `true` if the slide is visible.
    */
-  function updateVisibility( this: SlideComponent, visible: boolean ): void {
+  function updateVisibility( visible: boolean ): void {
     const ariaHidden = ! visible && ! isActive();
 
     setAttribute( slide, ARIA_HIDDEN, ariaHidden || null );
@@ -209,7 +203,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
 
     if ( visible !== hasClass( slide, CLASS_VISIBLE ) ) {
       toggleClass( slide, CLASS_VISIBLE, visible );
-      emit( visible ? EVENT_VISIBLE : EVENT_HIDDEN, this );
+      emit( visible ? EVENT_VISIBLE : EVENT_HIDDEN, self );
     }
   }
 
@@ -230,7 +224,8 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
    * @return `true` if the slide is active.
    */
   function isActive(): boolean {
-    return Splide.index === index;
+    const { index: curr } = Splide;
+    return curr === index || ( options.cloneStatus && curr === slideIndex );
   }
 
   /**
@@ -269,7 +264,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
     return diff <= distance;
   }
 
-  return {
+  const self = {
     index,
     slideIndex,
     slide,
@@ -281,4 +276,6 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
     style,
     isWithin,
   };
+
+  return self;
 }

src/js/constants/defaults.ts

@@ -14,6 +14,7 @@ export const DEFAULTS: Options = {
   speed            : 400,
   waitForTransition: true,
   perPage          : 1,
+  cloneStatus      : true,
   arrows           : true,
   pagination       : true,
   interval         : 5000,

src/js/constants/events.ts

@@ -2,6 +2,7 @@ export const EVENT_MOUNTED            = 'mounted';
 export const EVENT_READY              = 'ready';
 export const EVENT_MOVE               = 'move';
 export const EVENT_MOVED              = 'moved';
+export const EVENT_SHIFTED            = 'shifted';
 export const EVENT_CLICK              = 'click';
 export const EVENT_ACTIVE             = 'active';
 export const EVENT_INACTIVE           = 'inactive';

src/js/test/php/examples/default.php

@@ -21,12 +21,14 @@ $settings = get_settings();
       var splide = new Splide( '#splide01', {
         type   : 'loop',
         perPage: 3,
-        // perMove: 2,
-        rewind: true,
+        // perMove: 1,
+        // rewind: true,
         // padding: {
         //   right: 0,
         //   left: 40,
         // },
+        updateOnMove: true,
+        focus: 'center',
         noDrag: 'button',
       } );
 
@@ -46,6 +48,10 @@ $settings = get_settings();
         console.log( 'click' );
       } );
 
+      splide.on( 'shifted', () => {
+        console.log( 'shifted' );
+      } );
+
       splide.mount();
     } );
   </script>
@@ -58,7 +64,7 @@ $settings = get_settings();
 </head>
 <body>
 
-<?php render( 'splide01', 12, true ); ?>
+<?php render( 'splide01', 11 ); ?>
 
 <pre></pre>
 

src/js/test/php/examples/drag-free.php

@@ -40,7 +40,7 @@ $settings = get_settings();
 </head>
 <body>
 
-<?php render(); ?>
+<?php render( 'splide01', 4 ); ?>
 
 </body>
 </html>

src/js/types/events.ts

@@ -10,6 +10,7 @@ export interface EventMap {
   'click': ( Slide: SlideComponent, e: MouseEvent ) => void;
   'move': ( index: number, prev: number, dest: number ) => void;
   'moved': ( index: number, prev: number, dest: number ) => void;
+  'shifted': () => void;
   'active': ( Slide: SlideComponent ) => void;
   'inactive': ( Slide: SlideComponent ) => void;
   'visible': ( Slide: SlideComponent ) => void;

src/js/types/options.ts

@@ -262,6 +262,11 @@ export interface ResponsiveOptions {
    */
   clones?: number;
 
+  /**
+   * Determines whether to clone status classes for clones or not.
+   */
+  cloneStatus?: boolean;
+
   /**
    * Determines which slide should be active if there are multiple slides in a page.
    * Numbers and `'center'` are acceptable.