Optimize performance and Refactoring.

dist/js/splide.cjs.js

@@ -427,7 +427,6 @@ var EVENT_REFRESH = "refresh";
 var EVENT_UPDATED = "updated";
 var EVENT_RESIZE = "resize";
 var EVENT_RESIZED = "resized";
-var EVENT_REPOSITIONED = "repositioned";
 var EVENT_DRAG = "drag";
 var EVENT_DRAGGING = "dragging";
 var EVENT_DRAGGED = "dragged";
@@ -571,12 +570,9 @@ function Throttle(func, duration) {
   var interval;
 
   function throttled() {
-    var _this = this;
-
     if (!interval) {
-      var args = slice(arguments);
       interval = RequestInterval(duration || 0, function () {
-        func.apply(_this, args);
+        func();
         interval = null;
       }, null, 1);
       interval.start();
@@ -859,23 +855,26 @@ function Slide$1(Splide2, index, slideIndex, slide) {
       updateOnMove = options.updateOnMove,
       i18n = options.i18n,
       pagination = options.pagination,
-      slideFocus = options.slideFocus;
+      slideFocus = options.slideFocus,
+      live = options.live;
   var resolve = Components.Direction.resolve;
   var styles = getAttribute(slide, "style");
   var label = getAttribute(slide, ARIA_LABEL);
+  var slideLabel = label || format(i18n.slideLabel, [index + 1, Splide2.length]);
   var isClone = slideIndex > -1;
   var container = child(slide, "." + CLASS_CONTAINER);
-  var sr = create("span", CLASS_SR, child(slide));
+  var sr = create("span", CLASS_SR);
+  var focusableNodes = queryAll(slide, options.focusableNodes || "");
   var destroyed;
 
   function mount() {
     if (!isClone) {
-      var slideLabel = label || format(i18n.slideLabel, [index + 1, Splide2.length]);
+      var noDescription = pagination || options.slideFocus || isNavigation;
       slide.id = root.id + "-slide" + pad(index + 1);
       setAttribute(slide, ROLE, pagination ? "tabpanel" : "group");
-      setAttribute(slide, ARIA_ROLEDESCRIPTION, pagination ? "" : i18n.slide);
+      setAttribute(slide, ARIA_ROLEDESCRIPTION, noDescription ? "" : i18n.slide);
       setAttribute(slide, ARIA_LABEL, slideLabel);
-      sr.textContent = slideLabel;
+      live && before(sr, child(slide));
     }
 
     listen();
@@ -884,7 +883,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   function listen() {
     bind(slide, "click", apply(emit, EVENT_CLICK, self));
     bind(slide, "keydown", apply(emit, EVENT_SLIDE_KEYDOWN, self));
-    on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], apply(update, false));
+    on([EVENT_MOVED, EVENT_SCROLLED], apply(update, false));
     on(EVENT_SHIFTED, apply(update, true));
     on(EVENT_NAVIGATION_MOUNTED, initNavigation);
 
@@ -959,14 +958,14 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     var hidden = !isVisible() && (!active || isClone);
     setAttribute(slide, ARIA_CURRENT, isNavigation && active || "");
     setAttribute(slide, ARIA_HIDDEN, hidden || "");
-    setAttribute(queryAll(slide, options.focusableNodes || ""), TAB_INDEX, hidden ? -1 : "");
+    setAttribute(focusableNodes, TAB_INDEX, hidden ? -1 : "");
 
     if (slideFocus) {
       setAttribute(slide, TAB_INDEX, hidden ? -1 : 0);
     }
 
-    if (options.live) {
-      hidden ? remove(sr) : before(sr, child(slide));
+    if (live) {
+      sr.textContent = hidden ? "" : slideLabel;
     }
   }
 
@@ -1402,7 +1401,7 @@ function Move(Splide2, Components2, options) {
     if (!Components2.Controller.isBusy()) {
       Components2.Scroll.cancel();
       jump(Splide2.index);
-      emit(EVENT_REPOSITIONED);
+      Components2.Slides.update();
     }
   }
 
@@ -2653,15 +2652,22 @@ function Pagination(Splide2, Components2, options) {
 var TRIGGER_KEYS = [" ", "Enter"];
 
 function Sync(Splide2, Components2, options) {
-  var list = Components2.Elements.list;
+  var isNavigation = options.isNavigation;
   var events = [];
 
+  function setup() {
+    options.slideFocus = isNavigation && isUndefined(options.slideFocus);
+  }
+
   function mount() {
     Splide2.splides.forEach(function (target) {
-      !target.isParent && sync(target.splide);
+      if (!target.isParent) {
+        sync(Splide2, target.splide);
+        sync(target.splide, Splide2);
+      }
     });
 
-    if (options.isNavigation) {
+    if (isNavigation) {
       navigate();
     }
   }
@@ -2678,15 +2684,12 @@ function Sync(Splide2, Components2, options) {
     mount();
   }
 
-  function sync(splide) {
-    [Splide2, splide].forEach(function (instance) {
-      var event = EventInterface(instance);
-      var target = instance === Splide2 ? splide : Splide2;
-      event.on(EVENT_MOVE, function (index, prev, dest) {
-        target.go(target.is(LOOP) ? dest : index);
-      });
-      events.push(event);
+  function sync(splide, target) {
+    var event = EventInterface(splide);
+    event.on(EVENT_MOVE, function (index, prev, dest) {
+      target.go(target.is(LOOP) ? dest : index);
     });
+    events.push(event);
   }
 
   function navigate() {
@@ -2700,7 +2703,7 @@ function Sync(Splide2, Components2, options) {
   }
 
   function update() {
-    setAttribute(list, ARIA_ORIENTATION, options.direction === TTB ? "vertical" : "");
+    setAttribute(Components2.Elements.list, ARIA_ORIENTATION, options.direction === TTB ? "vertical" : "");
   }
 
   function onClick(Slide) {
@@ -2715,6 +2718,7 @@ function Sync(Splide2, Components2, options) {
   }
 
   return {
+    setup: setup,
     mount: mount,
     destroy: destroy,
     remount: remount
@@ -2973,7 +2977,7 @@ var _Splide = /*#__PURE__*/function () {
   var _proto = _Splide.prototype;
 
   _proto.mount = function mount(Extensions, Transition) {
-    var _this2 = this;
+    var _this = this;
 
     var state = this.state,
         Components2 = this.Components;
@@ -2986,7 +2990,7 @@ var _Splide = /*#__PURE__*/function () {
       Transition: this._Transition
     });
     forOwn(Constructors, function (Component, key) {
-      var component = Component(_this2, Components2, _this2._options);
+      var component = Component(_this, Components2, _this._options);
       Components2[key] = component;
       component.setup && component.setup();
     });
@@ -3140,7 +3144,7 @@ var Style = /*#__PURE__*/function () {
   };
 
   _proto2.build = function build() {
-    var _this3 = this;
+    var _this2 = this;
 
     var css = "";
 
@@ -3149,11 +3153,11 @@ var Style = /*#__PURE__*/function () {
     }
 
     Object.keys(this.styles).sort(function (n, m) {
-      return _this3.options.mediaQuery === "min" ? +n - +m : +m - +n;
+      return _this2.options.mediaQuery === "min" ? +n - +m : +m - +n;
     }).forEach(function (breakpoint) {
       if (breakpoint !== "default") {
         css += "@media screen and (max-width: " + breakpoint + "px) {";
-        css += _this3.buildSelectors(_this3.styles[breakpoint]);
+        css += _this2.buildSelectors(_this2.styles[breakpoint]);
         css += "}";
       }
     });
@@ -3161,11 +3165,11 @@ var Style = /*#__PURE__*/function () {
   };
 
   _proto2.buildSelectors = function buildSelectors(selectors) {
-    var _this4 = this;
+    var _this3 = this;
 
     var css = "";
     forOwn(selectors, function (styles, selector) {
-      selector = ("#" + _this4.id + " " + selector).trim();
+      selector = ("#" + _this3.id + " " + selector).trim();
       css += selector + " {";
       forOwn(styles, function (value, prop) {
         if (value || value === 0) {
@@ -3220,7 +3224,7 @@ var SplideRenderer = /*#__PURE__*/function () {
   };
 
   _proto3.initSlides = function initSlides() {
-    var _this5 = this;
+    var _this4 = this;
 
     push(this.slides, this.contents.map(function (content, index) {
       content = isString(content) ? {
@@ -3229,12 +3233,12 @@ var SplideRenderer = /*#__PURE__*/function () {
       content.styles = content.styles || {};
       content.attrs = content.attrs || {};
 
-      _this5.cover(content);
+      _this4.cover(content);
 
-      var classes = _this5.options.classes.slide + " " + (index === 0 ? CLASS_ACTIVE : "");
+      var classes = _this4.options.classes.slide + " " + (index === 0 ? CLASS_ACTIVE : "");
       assign(content.attrs, {
         class: (classes + " " + (content.attrs.class || "")).trim(),
-        style: _this5.buildStyles(content.styles)
+        style: _this4.buildStyles(content.styles)
       });
       return content;
     }));
@@ -3245,57 +3249,57 @@ var SplideRenderer = /*#__PURE__*/function () {
   };
 
   _proto3.registerRootStyles = function registerRootStyles() {
-    var _this6 = this;
+    var _this5 = this;
 
     this.breakpoints.forEach(function (_ref2) {
       var width = _ref2[0],
           options = _ref2[1];
 
-      _this6.Style.rule(" ", "max-width", unit(options.width), width);
+      _this5.Style.rule(" ", "max-width", unit(options.width), width);
     });
   };
 
   _proto3.registerTrackStyles = function registerTrackStyles() {
-    var _this7 = this;
+    var _this6 = this;
 
     var Style2 = this.Style;
     var selector = "." + CLASS_TRACK;
     this.breakpoints.forEach(function (_ref3) {
       var width = _ref3[0],
           options = _ref3[1];
-      Style2.rule(selector, _this7.resolve("paddingLeft"), _this7.cssPadding(options, false), width);
-      Style2.rule(selector, _this7.resolve("paddingRight"), _this7.cssPadding(options, true), width);
-      Style2.rule(selector, "height", _this7.cssTrackHeight(options), width);
+      Style2.rule(selector, _this6.resolve("paddingLeft"), _this6.cssPadding(options, false), width);
+      Style2.rule(selector, _this6.resolve("paddingRight"), _this6.cssPadding(options, true), width);
+      Style2.rule(selector, "height", _this6.cssTrackHeight(options), width);
     });
   };
 
   _proto3.registerListStyles = function registerListStyles() {
-    var _this8 = this;
+    var _this7 = this;
 
     var Style2 = this.Style;
     var selector = "." + CLASS_LIST;
     this.breakpoints.forEach(function (_ref4) {
       var width = _ref4[0],
           options = _ref4[1];
-      Style2.rule(selector, "transform", _this8.buildTranslate(options), width);
+      Style2.rule(selector, "transform", _this7.buildTranslate(options), width);
 
-      if (!_this8.cssSlideHeight(options)) {
-        Style2.rule(selector, "aspect-ratio", _this8.cssAspectRatio(options), width);
+      if (!_this7.cssSlideHeight(options)) {
+        Style2.rule(selector, "aspect-ratio", _this7.cssAspectRatio(options), width);
       }
     });
   };
 
   _proto3.registerSlideStyles = function registerSlideStyles() {
-    var _this9 = this;
+    var _this8 = this;
 
     var Style2 = this.Style;
     var selector = "." + CLASS_SLIDE;
     this.breakpoints.forEach(function (_ref5) {
       var width = _ref5[0],
           options = _ref5[1];
-      Style2.rule(selector, "width", _this9.cssSlideWidth(options), width);
-      Style2.rule(selector, "height", _this9.cssSlideHeight(options) || "100%", width);
-      Style2.rule(selector, _this9.resolve("marginRight"), unit(options.gap) || "0px", width);
+      Style2.rule(selector, "width", _this8.cssSlideWidth(options), width);
+      Style2.rule(selector, "height", _this8.cssSlideHeight(options) || "100%", width);
+      Style2.rule(selector, _this8.resolve("marginRight"), unit(options.gap) || "0px", width);
       Style2.rule(selector + " > img", "display", options.cover ? "none" : "inline", width);
     });
   };
@@ -3453,14 +3457,14 @@ var SplideRenderer = /*#__PURE__*/function () {
   };
 
   _proto3.parseBreakpoints = function parseBreakpoints() {
-    var _this10 = this;
+    var _this9 = this;
 
     var breakpoints = this.options.breakpoints;
     this.breakpoints.push(["default", this.options]);
 
     if (breakpoints) {
       forOwn(breakpoints, function (options, width) {
-        _this10.breakpoints.push([width, merge(merge({}, _this10.options), options)]);
+        _this9.breakpoints.push([width, merge(merge({}, _this9.options), options)]);
       });
     }
   };
@@ -3513,11 +3517,11 @@ var SplideRenderer = /*#__PURE__*/function () {
   };
 
   _proto3.renderSlides = function renderSlides() {
-    var _this11 = this;
+    var _this10 = this;
 
     var tag = this.config.slideTag;
     return this.slides.map(function (content) {
-      return "<" + tag + " " + _this11.buildAttrs(content.attrs) + ">" + (content.html || "") + "</" + tag + ">";
+      return "<" + tag + " " + _this10.buildAttrs(content.attrs) + ">" + (content.html || "") + "</" + tag + ">";
     }).join("");
   };
 
@@ -3686,7 +3690,6 @@ exports.EVENT_PAGINATION_MOUNTED = EVENT_PAGINATION_MOUNTED;
 exports.EVENT_PAGINATION_UPDATED = EVENT_PAGINATION_UPDATED;
 exports.EVENT_READY = EVENT_READY;
 exports.EVENT_REFRESH = EVENT_REFRESH;
-exports.EVENT_REPOSITIONED = EVENT_REPOSITIONED;
 exports.EVENT_RESIZE = EVENT_RESIZE;
 exports.EVENT_RESIZED = EVENT_RESIZED;
 exports.EVENT_SCROLL = EVENT_SCROLL;

dist/js/splide.esm.js

@@ -422,7 +422,6 @@ var EVENT_REFRESH = "refresh";
 var EVENT_UPDATED = "updated";
 var EVENT_RESIZE = "resize";
 var EVENT_RESIZED = "resized";
-var EVENT_REPOSITIONED = "repositioned";
 var EVENT_DRAG = "drag";
 var EVENT_DRAGGING = "dragging";
 var EVENT_DRAGGED = "dragged";
@@ -566,12 +565,9 @@ function Throttle(func, duration) {
   var interval;
 
   function throttled() {
-    var _this = this;
-
     if (!interval) {
-      var args = slice(arguments);
       interval = RequestInterval(duration || 0, function () {
-        func.apply(_this, args);
+        func();
         interval = null;
       }, null, 1);
       interval.start();
@@ -854,23 +850,26 @@ function Slide$1(Splide2, index, slideIndex, slide) {
       updateOnMove = options.updateOnMove,
       i18n = options.i18n,
       pagination = options.pagination,
-      slideFocus = options.slideFocus;
+      slideFocus = options.slideFocus,
+      live = options.live;
   var resolve = Components.Direction.resolve;
   var styles = getAttribute(slide, "style");
   var label = getAttribute(slide, ARIA_LABEL);
+  var slideLabel = label || format(i18n.slideLabel, [index + 1, Splide2.length]);
   var isClone = slideIndex > -1;
   var container = child(slide, "." + CLASS_CONTAINER);
-  var sr = create("span", CLASS_SR, child(slide));
+  var sr = create("span", CLASS_SR);
+  var focusableNodes = queryAll(slide, options.focusableNodes || "");
   var destroyed;
 
   function mount() {
     if (!isClone) {
-      var slideLabel = label || format(i18n.slideLabel, [index + 1, Splide2.length]);
+      var noDescription = pagination || options.slideFocus || isNavigation;
       slide.id = root.id + "-slide" + pad(index + 1);
       setAttribute(slide, ROLE, pagination ? "tabpanel" : "group");
-      setAttribute(slide, ARIA_ROLEDESCRIPTION, pagination ? "" : i18n.slide);
+      setAttribute(slide, ARIA_ROLEDESCRIPTION, noDescription ? "" : i18n.slide);
       setAttribute(slide, ARIA_LABEL, slideLabel);
-      sr.textContent = slideLabel;
+      live && before(sr, child(slide));
     }
 
     listen();
@@ -879,7 +878,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
   function listen() {
     bind(slide, "click", apply(emit, EVENT_CLICK, self));
     bind(slide, "keydown", apply(emit, EVENT_SLIDE_KEYDOWN, self));
-    on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], apply(update, false));
+    on([EVENT_MOVED, EVENT_SCROLLED], apply(update, false));
     on(EVENT_SHIFTED, apply(update, true));
     on(EVENT_NAVIGATION_MOUNTED, initNavigation);
 
@@ -954,14 +953,14 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     var hidden = !isVisible() && (!active || isClone);
     setAttribute(slide, ARIA_CURRENT, isNavigation && active || "");
     setAttribute(slide, ARIA_HIDDEN, hidden || "");
-    setAttribute(queryAll(slide, options.focusableNodes || ""), TAB_INDEX, hidden ? -1 : "");
+    setAttribute(focusableNodes, TAB_INDEX, hidden ? -1 : "");
 
     if (slideFocus) {
       setAttribute(slide, TAB_INDEX, hidden ? -1 : 0);
     }
 
-    if (options.live) {
-      hidden ? remove(sr) : before(sr, child(slide));
+    if (live) {
+      sr.textContent = hidden ? "" : slideLabel;
     }
   }
 
@@ -1397,7 +1396,7 @@ function Move(Splide2, Components2, options) {
     if (!Components2.Controller.isBusy()) {
       Components2.Scroll.cancel();
       jump(Splide2.index);
-      emit(EVENT_REPOSITIONED);
+      Components2.Slides.update();
     }
   }
 
@@ -2648,15 +2647,22 @@ function Pagination(Splide2, Components2, options) {
 var TRIGGER_KEYS = [" ", "Enter"];
 
 function Sync(Splide2, Components2, options) {
-  var list = Components2.Elements.list;
+  var isNavigation = options.isNavigation;
   var events = [];
 
+  function setup() {
+    options.slideFocus = isNavigation && isUndefined(options.slideFocus);
+  }
+
   function mount() {
     Splide2.splides.forEach(function (target) {
-      !target.isParent && sync(target.splide);
+      if (!target.isParent) {
+        sync(Splide2, target.splide);
+        sync(target.splide, Splide2);
+      }
     });
 
-    if (options.isNavigation) {
+    if (isNavigation) {
       navigate();
     }
   }
@@ -2673,15 +2679,12 @@ function Sync(Splide2, Components2, options) {
     mount();
   }
 
-  function sync(splide) {
-    [Splide2, splide].forEach(function (instance) {
-      var event = EventInterface(instance);
-      var target = instance === Splide2 ? splide : Splide2;
-      event.on(EVENT_MOVE, function (index, prev, dest) {
-        target.go(target.is(LOOP) ? dest : index);
-      });
-      events.push(event);
+  function sync(splide, target) {
+    var event = EventInterface(splide);
+    event.on(EVENT_MOVE, function (index, prev, dest) {
+      target.go(target.is(LOOP) ? dest : index);
     });
+    events.push(event);
   }
 
   function navigate() {
@@ -2695,7 +2698,7 @@ function Sync(Splide2, Components2, options) {
   }
 
   function update() {
-    setAttribute(list, ARIA_ORIENTATION, options.direction === TTB ? "vertical" : "");
+    setAttribute(Components2.Elements.list, ARIA_ORIENTATION, options.direction === TTB ? "vertical" : "");
   }
 
   function onClick(Slide) {
@@ -2710,6 +2713,7 @@ function Sync(Splide2, Components2, options) {
   }
 
   return {
+    setup: setup,
     mount: mount,
     destroy: destroy,
     remount: remount
@@ -2968,7 +2972,7 @@ var _Splide = /*#__PURE__*/function () {
   var _proto = _Splide.prototype;
 
   _proto.mount = function mount(Extensions, Transition) {
-    var _this2 = this;
+    var _this = this;
 
     var state = this.state,
         Components2 = this.Components;
@@ -2981,7 +2985,7 @@ var _Splide = /*#__PURE__*/function () {
       Transition: this._Transition
     });
     forOwn(Constructors, function (Component, key) {
-      var component = Component(_this2, Components2, _this2._options);
+      var component = Component(_this, Components2, _this._options);
       Components2[key] = component;
       component.setup && component.setup();
     });
@@ -3135,7 +3139,7 @@ var Style = /*#__PURE__*/function () {
   };
 
   _proto2.build = function build() {
-    var _this3 = this;
+    var _this2 = this;
 
     var css = "";
 
@@ -3144,11 +3148,11 @@ var Style = /*#__PURE__*/function () {
     }
 
     Object.keys(this.styles).sort(function (n, m) {
-      return _this3.options.mediaQuery === "min" ? +n - +m : +m - +n;
+      return _this2.options.mediaQuery === "min" ? +n - +m : +m - +n;
     }).forEach(function (breakpoint) {
       if (breakpoint !== "default") {
         css += "@media screen and (max-width: " + breakpoint + "px) {";
-        css += _this3.buildSelectors(_this3.styles[breakpoint]);
+        css += _this2.buildSelectors(_this2.styles[breakpoint]);
         css += "}";
       }
     });
@@ -3156,11 +3160,11 @@ var Style = /*#__PURE__*/function () {
   };
 
   _proto2.buildSelectors = function buildSelectors(selectors) {
-    var _this4 = this;
+    var _this3 = this;
 
     var css = "";
     forOwn(selectors, function (styles, selector) {
-      selector = ("#" + _this4.id + " " + selector).trim();
+      selector = ("#" + _this3.id + " " + selector).trim();
       css += selector + " {";
       forOwn(styles, function (value, prop) {
         if (value || value === 0) {
@@ -3215,7 +3219,7 @@ var SplideRenderer = /*#__PURE__*/function () {
   };
 
   _proto3.initSlides = function initSlides() {
-    var _this5 = this;
+    var _this4 = this;
 
     push(this.slides, this.contents.map(function (content, index) {
       content = isString(content) ? {
@@ -3224,12 +3228,12 @@ var SplideRenderer = /*#__PURE__*/function () {
       content.styles = content.styles || {};
       content.attrs = content.attrs || {};
 
-      _this5.cover(content);
+      _this4.cover(content);
 
-      var classes = _this5.options.classes.slide + " " + (index === 0 ? CLASS_ACTIVE : "");
+      var classes = _this4.options.classes.slide + " " + (index === 0 ? CLASS_ACTIVE : "");
       assign(content.attrs, {
         class: (classes + " " + (content.attrs.class || "")).trim(),
-        style: _this5.buildStyles(content.styles)
+        style: _this4.buildStyles(content.styles)
       });
       return content;
     }));
@@ -3240,57 +3244,57 @@ var SplideRenderer = /*#__PURE__*/function () {
   };
 
   _proto3.registerRootStyles = function registerRootStyles() {
-    var _this6 = this;
+    var _this5 = this;
 
     this.breakpoints.forEach(function (_ref2) {
       var width = _ref2[0],
           options = _ref2[1];
 
-      _this6.Style.rule(" ", "max-width", unit(options.width), width);
+      _this5.Style.rule(" ", "max-width", unit(options.width), width);
     });
   };
 
   _proto3.registerTrackStyles = function registerTrackStyles() {
-    var _this7 = this;
+    var _this6 = this;
 
     var Style2 = this.Style;
     var selector = "." + CLASS_TRACK;
     this.breakpoints.forEach(function (_ref3) {
       var width = _ref3[0],
           options = _ref3[1];
-      Style2.rule(selector, _this7.resolve("paddingLeft"), _this7.cssPadding(options, false), width);
-      Style2.rule(selector, _this7.resolve("paddingRight"), _this7.cssPadding(options, true), width);
-      Style2.rule(selector, "height", _this7.cssTrackHeight(options), width);
+      Style2.rule(selector, _this6.resolve("paddingLeft"), _this6.cssPadding(options, false), width);
+      Style2.rule(selector, _this6.resolve("paddingRight"), _this6.cssPadding(options, true), width);
+      Style2.rule(selector, "height", _this6.cssTrackHeight(options), width);
     });
   };
 
   _proto3.registerListStyles = function registerListStyles() {
-    var _this8 = this;
+    var _this7 = this;
 
     var Style2 = this.Style;
     var selector = "." + CLASS_LIST;
     this.breakpoints.forEach(function (_ref4) {
       var width = _ref4[0],
           options = _ref4[1];
-      Style2.rule(selector, "transform", _this8.buildTranslate(options), width);
+      Style2.rule(selector, "transform", _this7.buildTranslate(options), width);
 
-      if (!_this8.cssSlideHeight(options)) {
-        Style2.rule(selector, "aspect-ratio", _this8.cssAspectRatio(options), width);
+      if (!_this7.cssSlideHeight(options)) {
+        Style2.rule(selector, "aspect-ratio", _this7.cssAspectRatio(options), width);
       }
     });
   };
 
   _proto3.registerSlideStyles = function registerSlideStyles() {
-    var _this9 = this;
+    var _this8 = this;
 
     var Style2 = this.Style;
     var selector = "." + CLASS_SLIDE;
     this.breakpoints.forEach(function (_ref5) {
       var width = _ref5[0],
           options = _ref5[1];
-      Style2.rule(selector, "width", _this9.cssSlideWidth(options), width);
-      Style2.rule(selector, "height", _this9.cssSlideHeight(options) || "100%", width);
-      Style2.rule(selector, _this9.resolve("marginRight"), unit(options.gap) || "0px", width);
+      Style2.rule(selector, "width", _this8.cssSlideWidth(options), width);
+      Style2.rule(selector, "height", _this8.cssSlideHeight(options) || "100%", width);
+      Style2.rule(selector, _this8.resolve("marginRight"), unit(options.gap) || "0px", width);
       Style2.rule(selector + " > img", "display", options.cover ? "none" : "inline", width);
     });
   };
@@ -3448,14 +3452,14 @@ var SplideRenderer = /*#__PURE__*/function () {
   };
 
   _proto3.parseBreakpoints = function parseBreakpoints() {
-    var _this10 = this;
+    var _this9 = this;
 
     var breakpoints = this.options.breakpoints;
     this.breakpoints.push(["default", this.options]);
 
     if (breakpoints) {
       forOwn(breakpoints, function (options, width) {
-        _this10.breakpoints.push([width, merge(merge({}, _this10.options), options)]);
+        _this9.breakpoints.push([width, merge(merge({}, _this9.options), options)]);
       });
     }
   };
@@ -3508,11 +3512,11 @@ var SplideRenderer = /*#__PURE__*/function () {
   };
 
   _proto3.renderSlides = function renderSlides() {
-    var _this11 = this;
+    var _this10 = this;
 
     var tag = this.config.slideTag;
     return this.slides.map(function (content) {
-      return "<" + tag + " " + _this11.buildAttrs(content.attrs) + ">" + (content.html || "") + "</" + tag + ">";
+      return "<" + tag + " " + _this10.buildAttrs(content.attrs) + ">" + (content.html || "") + "</" + tag + ">";
     }).join("");
   };
 
@@ -3633,4 +3637,4 @@ var SplideRenderer = /*#__PURE__*/function () {
   return SplideRenderer;
 }();
 
-export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_SR, CLASS_TOGGLE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY, 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, EventBinder, 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_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_SR, CLASS_TOGGLE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY, 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_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, EventBinder, EventInterface, RequestInterval, STATUS_CLASSES, Splide, SplideRenderer, State, Throttle, Splide as default };

dist/js/splide.js

@@ -423,7 +423,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var EVENT_UPDATED = "updated";
   var EVENT_RESIZE = "resize";
   var EVENT_RESIZED = "resized";
-  var EVENT_REPOSITIONED = "repositioned";
   var EVENT_DRAG = "drag";
   var EVENT_DRAGGING = "dragging";
   var EVENT_DRAGGED = "dragged";
@@ -567,12 +566,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var interval;
 
     function throttled() {
-      var _this = this;
-
       if (!interval) {
-        var args = slice(arguments);
         interval = RequestInterval(duration || 0, function () {
-          func.apply(_this, args);
+          func();
           interval = null;
         }, null, 1);
         interval.start();
@@ -853,23 +849,26 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         updateOnMove = options.updateOnMove,
         i18n = options.i18n,
         pagination = options.pagination,
-        slideFocus = options.slideFocus;
+        slideFocus = options.slideFocus,
+        live = options.live;
     var resolve = Components.Direction.resolve;
     var styles = getAttribute(slide, "style");
     var label = getAttribute(slide, ARIA_LABEL);
+    var slideLabel = label || format(i18n.slideLabel, [index + 1, Splide2.length]);
     var isClone = slideIndex > -1;
     var container = child(slide, "." + CLASS_CONTAINER);
-    var sr = create("span", CLASS_SR, child(slide));
+    var sr = create("span", CLASS_SR);
+    var focusableNodes = queryAll(slide, options.focusableNodes || "");
     var destroyed;
 
     function mount() {
       if (!isClone) {
-        var slideLabel = label || format(i18n.slideLabel, [index + 1, Splide2.length]);
+        var noDescription = pagination || options.slideFocus || isNavigation;
         slide.id = root.id + "-slide" + pad(index + 1);
         setAttribute(slide, ROLE, pagination ? "tabpanel" : "group");
-        setAttribute(slide, ARIA_ROLEDESCRIPTION, pagination ? "" : i18n.slide);
+        setAttribute(slide, ARIA_ROLEDESCRIPTION, noDescription ? "" : i18n.slide);
         setAttribute(slide, ARIA_LABEL, slideLabel);
-        sr.textContent = slideLabel;
+        live && before(sr, child(slide));
       }
 
       listen();
@@ -878,7 +877,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     function listen() {
       bind(slide, "click", apply(emit, EVENT_CLICK, self));
       bind(slide, "keydown", apply(emit, EVENT_SLIDE_KEYDOWN, self));
-      on([EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], apply(update, false));
+      on([EVENT_MOVED, EVENT_SCROLLED], apply(update, false));
       on(EVENT_SHIFTED, apply(update, true));
       on(EVENT_NAVIGATION_MOUNTED, initNavigation);
 
@@ -953,14 +952,14 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       var hidden = !isVisible() && (!active || isClone);
       setAttribute(slide, ARIA_CURRENT, isNavigation && active || "");
       setAttribute(slide, ARIA_HIDDEN, hidden || "");
-      setAttribute(queryAll(slide, options.focusableNodes || ""), TAB_INDEX, hidden ? -1 : "");
+      setAttribute(focusableNodes, TAB_INDEX, hidden ? -1 : "");
 
       if (slideFocus) {
         setAttribute(slide, TAB_INDEX, hidden ? -1 : 0);
       }
 
-      if (options.live) {
-        hidden ? remove(sr) : before(sr, child(slide));
+      if (live) {
+        sr.textContent = hidden ? "" : slideLabel;
       }
     }
 
@@ -1396,7 +1395,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       if (!Components2.Controller.isBusy()) {
         Components2.Scroll.cancel();
         jump(Splide2.index);
-        emit(EVENT_REPOSITIONED);
+        Components2.Slides.update();
       }
     }
 
@@ -2647,15 +2646,22 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   var TRIGGER_KEYS = [" ", "Enter"];
 
   function Sync(Splide2, Components2, options) {
-    var list = Components2.Elements.list;
+    var isNavigation = options.isNavigation;
     var events = [];
 
+    function setup() {
+      options.slideFocus = isNavigation && isUndefined(options.slideFocus);
+    }
+
     function mount() {
       Splide2.splides.forEach(function (target) {
-        !target.isParent && sync(target.splide);
+        if (!target.isParent) {
+          sync(Splide2, target.splide);
+          sync(target.splide, Splide2);
+        }
       });
 
-      if (options.isNavigation) {
+      if (isNavigation) {
         navigate();
       }
     }
@@ -2672,15 +2678,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       mount();
     }
 
-    function sync(splide) {
-      [Splide2, splide].forEach(function (instance) {
-        var event = EventInterface(instance);
-        var target = instance === Splide2 ? splide : Splide2;
-        event.on(EVENT_MOVE, function (index, prev, dest) {
-          target.go(target.is(LOOP) ? dest : index);
-        });
-        events.push(event);
+    function sync(splide, target) {
+      var event = EventInterface(splide);
+      event.on(EVENT_MOVE, function (index, prev, dest) {
+        target.go(target.is(LOOP) ? dest : index);
       });
+      events.push(event);
     }
 
     function navigate() {
@@ -2694,7 +2697,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function update() {
-      setAttribute(list, ARIA_ORIENTATION, options.direction === TTB ? "vertical" : "");
+      setAttribute(Components2.Elements.list, ARIA_ORIENTATION, options.direction === TTB ? "vertical" : "");
     }
 
     function onClick(Slide) {
@@ -2709,6 +2712,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     return {
+      setup: setup,
       mount: mount,
       destroy: destroy,
       remount: remount
@@ -2967,7 +2971,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var _proto = _Splide.prototype;
 
     _proto.mount = function mount(Extensions, Transition) {
-      var _this2 = this;
+      var _this = this;
 
       var state = this.state,
           Components2 = this.Components;
@@ -2980,7 +2984,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         Transition: this._Transition
       });
       forOwn(Constructors, function (Component, key) {
-        var component = Component(_this2, Components2, _this2._options);
+        var component = Component(_this, Components2, _this._options);
         Components2[key] = component;
         component.setup && component.setup();
       });

dist/types/index.d.ts

@@ -1554,7 +1554,6 @@ declare const EVENT_REFRESH = "refresh";
 declare const EVENT_UPDATED = "updated";
 declare const EVENT_RESIZE = "resize";
 declare const EVENT_RESIZED = "resized";
-declare const EVENT_REPOSITIONED = "repositioned";
 declare const EVENT_DRAG = "drag";
 declare const EVENT_DRAGGING = "dragging";
 declare const EVENT_DRAGGED = "dragged";
@@ -1619,4 +1618,4 @@ declare const CLASSES: {
     spinner: string;
 };
 
-export { AnyFunction, ArrowsComponent, AutoplayComponent, BaseComponent, CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_SR, CLASS_TOGGLE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY, CLASS_TRACK, CLASS_VISIBLE, Cast, ClonesComponent, ComponentConstructor, Components, ControllerComponent, CoverComponent, DirectionComponent, DragComponent, 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, ElementsComponent, EventBinder, EventBinderObject, EventInterface, EventInterfaceObject, EventMap, Head, KeyboardComponent, LayoutComponent, LazyLoadComponent, LiveComponent, MediaComponent, MoveComponent, Options, PaginationComponent, PaginationData, PaginationItem, Push, RequestInterval, RequestIntervalInterface, Resolve, ResponsiveOptions, STATUS_CLASSES, ScrollComponent, Shift, ShiftN, SlideComponent, SlidesComponent, Splide, SplideRenderer, State, StateObject, SyncComponent, SyncTarget, Throttle, ThrottleInstance, TransitionComponent, WheelComponent, Splide as default };
+export { AnyFunction, ArrowsComponent, AutoplayComponent, BaseComponent, CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_SR, CLASS_TOGGLE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY, CLASS_TRACK, CLASS_VISIBLE, Cast, ClonesComponent, ComponentConstructor, Components, ControllerComponent, CoverComponent, DirectionComponent, DragComponent, 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_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, ElementsComponent, EventBinder, EventBinderObject, EventInterface, EventInterfaceObject, EventMap, Head, KeyboardComponent, LayoutComponent, LazyLoadComponent, LiveComponent, MediaComponent, MoveComponent, Options, PaginationComponent, PaginationData, PaginationItem, Push, RequestInterval, RequestIntervalInterface, Resolve, ResponsiveOptions, STATUS_CLASSES, ScrollComponent, Shift, ShiftN, SlideComponent, SlidesComponent, Splide, SplideRenderer, State, StateObject, SyncComponent, SyncTarget, Throttle, ThrottleInstance, TransitionComponent, WheelComponent, Splide as default };

src/js/components/Move/Move.ts

@@ -3,7 +3,6 @@ import {
   EVENT_MOVE,
   EVENT_MOVED,
   EVENT_REFRESH,
-  EVENT_REPOSITIONED,
   EVENT_RESIZED,
   EVENT_SHIFTED,
   EVENT_UPDATED,
@@ -78,7 +77,7 @@ export function Move( Splide: Splide, Components: Components, options: Options )
     if ( ! Components.Controller.isBusy() ) {
       Components.Scroll.cancel();
       jump( Splide.index );
-      emit( EVENT_REPOSITIONED );
+      Components.Slides.update();
     }
   }
 

src/js/components/Slides/Slide.ts

@@ -25,8 +25,6 @@ import {
   EVENT_MOVE,
   EVENT_MOVED,
   EVENT_NAVIGATION_MOUNTED,
-  EVENT_REFRESH,
-  EVENT_REPOSITIONED,
   EVENT_SCROLLED,
   EVENT_SHIFTED,
   EVENT_SLIDE_KEYDOWN,
@@ -93,13 +91,15 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
   const event = EventInterface( Splide );
   const { on, emit, bind } = event;
   const { Components, root, options } = Splide;
-  const { isNavigation, updateOnMove, i18n, pagination, slideFocus } = options;
+  const { isNavigation, updateOnMove, i18n, pagination, slideFocus, live } = options;
   const { resolve } = Components.Direction;
-  const styles    = getAttribute( slide, 'style' );
-  const label     = getAttribute( slide, ARIA_LABEL );
-  const isClone   = slideIndex > -1;
-  const container = child( slide, `.${ CLASS_CONTAINER }` );
-  const sr        = create( 'span', CLASS_SR, child( slide ) );
+  const styles         = getAttribute( slide, 'style' );
+  const label          = getAttribute( slide, ARIA_LABEL );
+  const slideLabel     = label || format( i18n.slideLabel, [ index + 1, Splide.length ] );
+  const isClone        = slideIndex > -1;
+  const container      = child( slide, `.${ CLASS_CONTAINER }` );
+  const sr             = create( 'span', CLASS_SR );
+  const focusableNodes = queryAll( slide, options.focusableNodes || '' );
 
   /**
    * Turns into `true` when the component is destroyed.
@@ -111,13 +111,13 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
    */
   function mount( this: SlideComponent ): void {
     if ( ! isClone ) {
-      const slideLabel = label || format( i18n.slideLabel, [ index + 1, Splide.length ] );
+      const noDescription = pagination || options.slideFocus || isNavigation;
 
       slide.id = `${ root.id }-slide${ pad( index + 1 ) }`;
       setAttribute( slide, ROLE, pagination ? 'tabpanel' : 'group' );
-      setAttribute( slide, ARIA_ROLEDESCRIPTION, pagination ? '' : i18n.slide );
+      setAttribute( slide, ARIA_ROLEDESCRIPTION, noDescription ? '' : i18n.slide );
       setAttribute( slide, ARIA_LABEL, slideLabel );
-      sr.textContent = slideLabel;
+      live && before( sr, child( slide ) );
     }
 
     listen();
@@ -129,7 +129,7 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
   function listen(): void {
     bind( slide, 'click', apply( emit, EVENT_CLICK, self ) );
     bind( slide, 'keydown', apply( emit, EVENT_SLIDE_KEYDOWN, self ) );
-    on( [ EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED ], apply( update, false ) );
+    on( [ EVENT_MOVED, EVENT_SCROLLED ], apply( update, false ) );
     on( EVENT_SHIFTED, apply( update, true ) );
     on( EVENT_NAVIGATION_MOUNTED, initNavigation );
 
@@ -232,14 +232,14 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
 
     setAttribute( slide, ARIA_CURRENT, isNavigation && active || '' );
     setAttribute( slide, ARIA_HIDDEN, hidden || '' );
-    setAttribute( queryAll( slide, options.focusableNodes || '' ), TAB_INDEX, hidden ? -1 : '' );
+    setAttribute( focusableNodes, TAB_INDEX, hidden ? -1 : '' );
 
     if ( slideFocus ) {
       setAttribute( slide, TAB_INDEX, hidden ? -1 : 0 );
     }
 
-    if ( options.live ) {
-      hidden ? remove( sr ) : before( sr, child( slide ) );
+    if ( live ) {
+      sr.textContent = hidden ? '' : slideLabel;
     }
   }
 

src/js/components/Slides/test/sr.test.ts

@@ -3,13 +3,13 @@ import { init } from '../../../test';
 
 
 describe( 'The SR field', () => {
-  test( 'should be prepended to the active slide when `live` option is `true`.', () => {
+  test( 'should be prepended to each slide when `live` option is `true`.', () => {
     const splide   = init();
     const Slides   = splide.Components.Slides;
     const callback = jest.fn();
 
     Slides.forEach( Slide => {
-      expect( Slide.slide.firstElementChild.classList.contains( CLASS_SR ) ).toBe( Slide.index === 0 );
+      expect( Slide.slide.firstElementChild.classList.contains( CLASS_SR ) ).toBe( true );
       callback();
     } );
 
@@ -37,13 +37,17 @@ describe( 'The SR field', () => {
     const Slide2 = Slides.getAt( 2 );
 
     expect( Slide0.slide.firstElementChild.textContent ).toBe( `1 of ${ splide.length }` );
+    expect( Slide1.slide.firstElementChild.textContent ).toBe( '' );
+    expect( Slide2.slide.firstElementChild.textContent ).toBe( '' );
 
     splide.go( 1 );
-
+    expect( Slide0.slide.firstElementChild.textContent ).toBe( '' );
     expect( Slide1.slide.firstElementChild.textContent ).toBe( `2 of ${ splide.length }` );
+    expect( Slide2.slide.firstElementChild.textContent ).toBe( '' );
 
     splide.go( 2 );
-
+    expect( Slide0.slide.firstElementChild.textContent ).toBe( '' );
+    expect( Slide1.slide.firstElementChild.textContent ).toBe( '' );
     expect( Slide2.slide.firstElementChild.textContent ).toBe( `3 of ${ splide.length }` );
   } );
 } );

src/js/components/Sync/Sync.ts

@@ -12,7 +12,7 @@ import { LOOP } from '../../constants/types';
 import { EventInterface, EventInterfaceObject } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { empty, includes, prevent, setAttribute } from '../../utils';
+import { empty, includes, isUndefined, prevent, setAttribute } from '../../utils';
 import { normalizeKey } from '../../utils/dom/normalizeKey/normalizeKey';
 import { SlideComponent } from '../Slides/Slide';
 
@@ -45,18 +45,32 @@ const TRIGGER_KEYS = [ ' ', 'Enter' ];
  * @return A Sync component object.
  */
 export function Sync( Splide: Splide, Components: Components, options: Options ): SyncComponent {
-  const { list } = Components.Elements;
+  const { isNavigation } = options;
+
+  /**
+   * Stores event objects.
+   */
   const events: EventInterfaceObject[] = [];
 
+  /**
+   * Called when the component is constructed.
+   */
+  function setup(): void {
+    options.slideFocus = isNavigation && isUndefined( options.slideFocus );
+  }
+
   /**
    * Called when the component is mounted.
    */
   function mount(): void {
     Splide.splides.forEach( target => {
-      ! target.isParent && sync( target.splide );
+      if ( ! target.isParent ) {
+        sync( Splide, target.splide );
+        sync( target.splide, Splide );
+      }
     } );
 
-    if ( options.isNavigation ) {
+    if ( isNavigation ) {
       navigate();
     }
   }
@@ -83,18 +97,16 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
    * Syncs the current index with a provided child splide instance.
    *
    * @param splide - A splide instance to sync with.
+   * @param target - A target splide instance.
    */
-  function sync( splide: Splide ): void {
-    [ Splide, splide ].forEach( instance => {
-      const event  = EventInterface( instance );
-      const target = instance === Splide ? splide : Splide;
-
-      event.on( EVENT_MOVE, ( index, prev, dest ) => {
-        target.go( target.is( LOOP ) ? dest : index );
-      } );
+  function sync( splide: Splide, target: Splide ): void {
+    const event = EventInterface( splide );
 
-      events.push( event );
+    event.on( EVENT_MOVE, ( index, prev, dest ) => {
+      target.go( target.is( LOOP ) ? dest : index );
     } );
+
+    events.push( event );
   }
 
   /**
@@ -117,7 +129,7 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
    * Update attributes.
    */
   function update(): void {
-    setAttribute( list, ARIA_ORIENTATION, options.direction === TTB ? 'vertical' : '' );
+    setAttribute( Components.Elements.list, ARIA_ORIENTATION, options.direction === TTB ? 'vertical' : '' );
   }
 
   /**
@@ -143,6 +155,7 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
   }
 
   return {
+    setup,
     mount,
     destroy,
     remount,

src/js/constants/events.ts

@@ -13,7 +13,6 @@ export const EVENT_REFRESH            = 'refresh';
 export const EVENT_UPDATED            = 'updated';
 export const EVENT_RESIZE             = 'resize';
 export const EVENT_RESIZED            = 'resized';
-export const EVENT_REPOSITIONED       = 'repositioned';
 export const EVENT_DRAG               = 'drag';
 export const EVENT_DRAGGING           = 'dragging';
 export const EVENT_DRAGGED            = 'dragged';

src/js/constructors/Throttle/Throttle.ts

@@ -1,5 +1,4 @@
 import { AnyFunction } from '../../types';
-import { slice } from '../../utils';
 import { RequestInterval, RequestIntervalInterface } from '../RequestInterval/RequestInterval';
 
 
@@ -26,13 +25,10 @@ export function Throttle<F extends AnyFunction>(
 ): ThrottleInstance<F> {
   let interval: RequestIntervalInterface;
 
-  function throttled( this: ThisParameterType<F> ): void {
+  function throttled(): void {
     if ( ! interval ) {
-      // eslint-disable-next-line prefer-rest-params
-      const args = slice( arguments );
-
       interval = RequestInterval( duration || 0, () => {
-        func.apply( this, args );
+        func();
         interval = null;
       }, null, 1 );