Bug Fix: Failed to loop the slider on scroll.

dist/js/splide.cjs.js

@@ -543,19 +543,21 @@ function Options(Splide2, Components2, options) {
       assert(false, e.message);
     }
     initialOptions = merge({}, options);
-  }
-  function mount() {
     const { breakpoints } = options;
-    const isMin = options.mediaQuery === "min";
     if (breakpoints) {
+      const isMin = options.mediaQuery === "min";
       points = Object.keys(breakpoints).sort((n, m) => isMin ? +m - +n : +n - +m).map((point) => [
         point,
         matchMedia(`(${isMin ? "min" : "max"}-width:${point}px)`)
       ]);
-      addEventListener("resize", throttledObserve);
       observe();
     }
   }
+  function mount() {
+    if (points) {
+      addEventListener("resize", throttledObserve);
+    }
+  }
   function destroy(completely) {
     if (completely) {
       removeEventListener("resize", throttledObserve);
@@ -1093,7 +1095,7 @@ function Layout(Splide2, Components2, options) {
   const { resolve } = Components2.Direction;
   const { track, list } = Components2.Elements;
   const { getAt } = Slides;
-  const vertical = options.direction === TTB;
+  let vertical;
   function mount() {
     init();
     bind(window, "resize load", Throttle(emit.bind(this, EVENT_RESIZE)));
@@ -1101,6 +1103,7 @@ function Layout(Splide2, Components2, options) {
     on(EVENT_RESIZE, resize);
   }
   function init() {
+    vertical = options.direction === TTB;
     ruleBy(Splide2.root, "maxWidth", unit(options.width));
     ruleBy(track, resolve("paddingLeft"), cssPadding(false));
     ruleBy(track, resolve("paddingRight"), cssPadding(true));
@@ -1222,16 +1225,18 @@ function Move(Splide2, Components2, options) {
   function jump(index) {
     translate(toPosition(index, true));
   }
-  function translate(position) {
-    Components2.Style.ruleBy(list, "transform", `translate${resolve("X")}(${loop(position)}px)`);
+  function translate(position, preventLoop) {
+    Components2.Style.ruleBy(list, "transform", `translate${resolve("X")}(${preventLoop ? position : loop(position)}px)`);
   }
   function loop(position) {
     if (!waiting && Splide2.is(LOOP)) {
-      const diff = position - getPosition();
-      const exceededMin = exceededLimit(false, position);
-      const exceededMax = exceededLimit(true, position);
-      if (exceededMin && diff > 0 || exceededMax && diff < 0) {
-        position += orient(sliderSize() * (exceededMin ? 1 : -1));
+      const diff = orient(position - getPosition());
+      const exceededMin = exceededLimit(false, position) && diff < 0;
+      const exceededMax = exceededLimit(true, position) && diff > 0;
+      if (exceededMin || exceededMax) {
+        const excess = position - getLimit(exceededMax);
+        const size = sliderSize();
+        position -= sign(excess) * size * ceil(abs(excess) / size);
       }
     }
     return position;
@@ -2109,8 +2114,11 @@ function Sync(Splide2, Components2, options) {
     const { on, emit } = EventInterface(Splide2);
     on(EVENT_CLICK, onClick);
     on(EVENT_SLIDE_KEYDOWN, onKeydown);
-    emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
+    on([EVENT_MOUNTED, EVENT_UPDATED], update);
     setAttribute(list, ROLE, "menu");
+    emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
+  }
+  function update() {
     setAttribute(list, ARIA_ORIENTATION, options.direction !== TTB ? "horizontal" : null);
   }
   function onClick(Slide) {
@@ -2248,7 +2256,7 @@ function Slide(Splide2, Components2, options) {
     const speed = getSpeed(index);
     if (abs(destination - position) >= 1 && speed >= 1) {
       apply(`transform ${speed}ms ${options.easing}`);
-      Move.translate(destination);
+      Move.translate(destination, true);
       endCallback = done;
     } else {
       Move.jump(index);

dist/js/splide.esm.js

@@ -539,19 +539,21 @@ function Options(Splide2, Components2, options) {
       assert(false, e.message);
     }
     initialOptions = merge({}, options);
-  }
-  function mount() {
     const { breakpoints } = options;
-    const isMin = options.mediaQuery === "min";
     if (breakpoints) {
+      const isMin = options.mediaQuery === "min";
       points = Object.keys(breakpoints).sort((n, m) => isMin ? +m - +n : +n - +m).map((point) => [
         point,
         matchMedia(`(${isMin ? "min" : "max"}-width:${point}px)`)
       ]);
-      addEventListener("resize", throttledObserve);
       observe();
     }
   }
+  function mount() {
+    if (points) {
+      addEventListener("resize", throttledObserve);
+    }
+  }
   function destroy(completely) {
     if (completely) {
       removeEventListener("resize", throttledObserve);
@@ -1089,7 +1091,7 @@ function Layout(Splide2, Components2, options) {
   const { resolve } = Components2.Direction;
   const { track, list } = Components2.Elements;
   const { getAt } = Slides;
-  const vertical = options.direction === TTB;
+  let vertical;
   function mount() {
     init();
     bind(window, "resize load", Throttle(emit.bind(this, EVENT_RESIZE)));
@@ -1097,6 +1099,7 @@ function Layout(Splide2, Components2, options) {
     on(EVENT_RESIZE, resize);
   }
   function init() {
+    vertical = options.direction === TTB;
     ruleBy(Splide2.root, "maxWidth", unit(options.width));
     ruleBy(track, resolve("paddingLeft"), cssPadding(false));
     ruleBy(track, resolve("paddingRight"), cssPadding(true));
@@ -1218,16 +1221,18 @@ function Move(Splide2, Components2, options) {
   function jump(index) {
     translate(toPosition(index, true));
   }
-  function translate(position) {
-    Components2.Style.ruleBy(list, "transform", `translate${resolve("X")}(${loop(position)}px)`);
+  function translate(position, preventLoop) {
+    Components2.Style.ruleBy(list, "transform", `translate${resolve("X")}(${preventLoop ? position : loop(position)}px)`);
   }
   function loop(position) {
     if (!waiting && Splide2.is(LOOP)) {
-      const diff = position - getPosition();
-      const exceededMin = exceededLimit(false, position);
-      const exceededMax = exceededLimit(true, position);
-      if (exceededMin && diff > 0 || exceededMax && diff < 0) {
-        position += orient(sliderSize() * (exceededMin ? 1 : -1));
+      const diff = orient(position - getPosition());
+      const exceededMin = exceededLimit(false, position) && diff < 0;
+      const exceededMax = exceededLimit(true, position) && diff > 0;
+      if (exceededMin || exceededMax) {
+        const excess = position - getLimit(exceededMax);
+        const size = sliderSize();
+        position -= sign(excess) * size * ceil(abs(excess) / size);
       }
     }
     return position;
@@ -2105,8 +2110,11 @@ function Sync(Splide2, Components2, options) {
     const { on, emit } = EventInterface(Splide2);
     on(EVENT_CLICK, onClick);
     on(EVENT_SLIDE_KEYDOWN, onKeydown);
-    emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
+    on([EVENT_MOUNTED, EVENT_UPDATED], update);
     setAttribute(list, ROLE, "menu");
+    emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
+  }
+  function update() {
     setAttribute(list, ARIA_ORIENTATION, options.direction !== TTB ? "horizontal" : null);
   }
   function onClick(Slide) {
@@ -2244,7 +2252,7 @@ function Slide(Splide2, Components2, options) {
     const speed = getSpeed(index);
     if (abs(destination - position) >= 1 && speed >= 1) {
       apply(`transform ${speed}ms ${options.easing}`);
-      Move.translate(destination);
+      Move.translate(destination, true);
       endCallback = done;
     } else {
       Move.jump(index);

dist/js/splide.js

@@ -621,23 +621,25 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       }
 
       initialOptions = merge({}, options);
-    }
-
-    function mount() {
       var breakpoints = options.breakpoints;
-      var isMin = options.mediaQuery === "min";
 
       if (breakpoints) {
+        var isMin = options.mediaQuery === "min";
         points = Object.keys(breakpoints).sort(function (n, m) {
           return isMin ? +m - +n : +n - +m;
         }).map(function (point) {
           return [point, matchMedia("(" + (isMin ? "min" : "max") + "-width:" + point + "px)")];
         });
-        addEventListener("resize", throttledObserve);
         observe();
       }
     }
 
+    function mount() {
+      if (points) {
+        addEventListener("resize", throttledObserve);
+      }
+    }
+
     function destroy(completely) {
       if (completely) {
         removeEventListener("resize", throttledObserve);
@@ -1282,7 +1284,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         track = _Components2$Elements2.track,
         list = _Components2$Elements2.list;
     var getAt = Slides.getAt;
-    var vertical = options.direction === TTB;
+    var vertical;
 
     function mount() {
       init();
@@ -1292,6 +1294,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function init() {
+      vertical = options.direction === TTB;
       ruleBy(Splide2.root, "maxWidth", unit(options.width));
       ruleBy(track, resolve("paddingLeft"), cssPadding(false));
       ruleBy(track, resolve("paddingRight"), cssPadding(true));
@@ -1450,18 +1453,20 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       translate(toPosition(index, true));
     }
 
-    function translate(position) {
-      Components2.Style.ruleBy(list, "transform", "translate" + resolve("X") + "(" + loop(position) + "px)");
+    function translate(position, preventLoop) {
+      Components2.Style.ruleBy(list, "transform", "translate" + resolve("X") + "(" + (preventLoop ? position : loop(position)) + "px)");
     }
 
     function loop(position) {
       if (!waiting && Splide2.is(LOOP)) {
-        var diff = position - getPosition();
-        var exceededMin = exceededLimit(false, position);
-        var exceededMax = exceededLimit(true, position);
-
-        if (exceededMin && diff > 0 || exceededMax && diff < 0) {
-          position += orient(sliderSize() * (exceededMin ? 1 : -1));
+        var diff = orient(position - getPosition());
+        var exceededMin = exceededLimit(false, position) && diff < 0;
+        var exceededMax = exceededLimit(true, position) && diff > 0;
+
+        if (exceededMin || exceededMax) {
+          var excess = position - getLimit(exceededMax);
+          var size = sliderSize();
+          position -= sign(excess) * size * ceil(abs(excess) / size);
         }
       }
 
@@ -2588,8 +2593,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
       on(EVENT_CLICK, onClick);
       on(EVENT_SLIDE_KEYDOWN, onKeydown);
-      emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
+      on([EVENT_MOUNTED, EVENT_UPDATED], update);
       setAttribute(list, ROLE, "menu");
+      emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
+    }
+
+    function update() {
       setAttribute(list, ARIA_ORIENTATION, options.direction !== TTB ? "horizontal" : null);
     }
 
@@ -2747,7 +2756,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
       if (abs(destination - position) >= 1 && speed >= 1) {
         apply("transform " + speed + "ms " + options.easing);
-        Move.translate(destination);
+        Move.translate(destination, true);
         endCallback = done;
       } else {
         Move.jump(index);

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

@@ -1 +1 @@
-{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["Layout.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,eAAgB,SAAQ,aAAa;IACpD,QAAQ,IAAI,MAAM,CAAC;IACnB,SAAS,CAAE,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzD,UAAU,IAAI,MAAM,CAAC;IACrB,SAAS,CAAE,KAAK,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IAC1D,UAAU,CAAE,KAAK,EAAE,OAAO,GAAI,MAAM,CAAC;CACtC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,eAAe,CA6MlG"}
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["Layout.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,eAAgB,SAAQ,aAAa;IACpD,QAAQ,IAAI,MAAM,CAAC;IACnB,SAAS,CAAE,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzD,UAAU,IAAI,MAAM,CAAC;IACrB,SAAS,CAAE,KAAK,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IAC1D,UAAU,CAAE,KAAK,EAAE,OAAO,GAAI,MAAM,CAAC;CACtC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,eAAe,CAmNlG"}

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

@@ -8,7 +8,7 @@ import { AnyFunction, BaseComponent, Components, Options } from '../../types';
 export interface MoveComponent extends BaseComponent {
     move(dest: number, index: number, prev: number, callback?: AnyFunction): void;
     jump(index: number): void;
-    translate(position: number): void;
+    translate(position: number, preventLoop?: boolean): void;
     cancel(): void;
     toIndex(position: number): number;
     toPosition(index: number, trimming?: boolean): number;

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

@@ -1 +1 @@
-{"version":3,"file":"Move.d.ts","sourceRoot":"","sources":["Move.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAI9E;;;;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,GAAI,IAAI,CAAC;IACpC,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,CAgP9F"}
+{"version":3,"file":"Move.d.ts","sourceRoot":"","sources":["Move.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAI9E;;;;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,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,CAmP9F"}

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

@@ -1 +1 @@
-{"version":3,"file":"Options.d.ts","sourceRoot":"","sources":["Options.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,gBAAiB,SAAQ,aAAa;CACtD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,gBAAgB,CAuGpG"}
+{"version":3,"file":"Options.d.ts","sourceRoot":"","sources":["Options.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,gBAAiB,SAAQ,aAAa;CACtD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,gBAAgB,CA2GpG"}

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

@@ -1 +1 @@
-{"version":3,"file":"Sync.d.ts","sourceRoot":"","sources":["Sync.ts"],"names":[],"mappings":"AAKA,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;AASD;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAoF9F"}
+{"version":3,"file":"Sync.d.ts","sourceRoot":"","sources":["Sync.ts"],"names":[],"mappings":"AAWA,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;AASD;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CA4F9F"}

src/js/components/Layout/Layout.ts

@@ -37,7 +37,11 @@ export function Layout( Splide: Splide, Components: Components, options: Options
   const { resolve } = Components.Direction;
   const { track, list } = Components.Elements;
   const { getAt } = Slides;
-  const vertical = options.direction === TTB;
+
+  /**
+   * Indicates whether the slider direction is vertical or not.
+   */
+  let vertical: boolean;
 
   /**
    * Called when the component is mounted.
@@ -55,6 +59,8 @@ export function Layout( Splide: Splide, Components: Components, options: Options
    * Uses `max-width` for the root to prevent the slider from exceeding the parent element.
    */
   function init(): void {
+    vertical = options.direction === TTB;
+
     ruleBy( Splide.root, 'maxWidth', unit( options.width ) );
     ruleBy( track, resolve( 'paddingLeft' ), cssPadding( false ) );
     ruleBy( track, resolve( 'paddingRight' ), cssPadding( true ) );

src/js/components/Move/Move.ts

@@ -11,7 +11,7 @@ import { FADE, LOOP, SLIDE } from '../../constants/types';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { AnyFunction, BaseComponent, Components, Options } from '../../types';
-import { abs, clamp, isUndefined, rect } from '../../utils';
+import { abs, ceil, clamp, isUndefined, rect, sign } from '../../utils';
 
 
 /**
@@ -22,7 +22,7 @@ import { abs, clamp, isUndefined, rect } from '../../utils';
 export interface MoveComponent extends BaseComponent {
   move( dest: number, index: number, prev: number, callback?: AnyFunction ): void;
   jump( index: number ): void;
-  translate( position: number ): void;
+  translate( position: number, preventLoop?: boolean ): void;
   cancel(): void;
   toIndex( position: number ): number;
   toPosition( index: number, trimming?: boolean ): number;
@@ -121,13 +121,14 @@ export function Move( Splide: Splide, Components: Components, options: Options )
   /**
    * Moves the slider to the provided position.
    *
-   * @param position - The position to move to.
+   * @param position    - The position to move to.
+   * @param preventLoop - Optional. If `true`, sets the provided position as is.
    */
-  function translate( position: number ): void {
+  function translate( position: number, preventLoop?: boolean ): void {
     Components.Style.ruleBy(
       list,
       'transform',
-      `translate${ resolve( 'X' ) }(${ loop( position ) }px)`
+      `translate${ resolve( 'X' ) }(${ preventLoop ? position : loop( position ) }px)`
     );
   }
 
@@ -138,12 +139,14 @@ export function Move( Splide: Splide, Components: Components, options: Options )
    */
   function loop( position: number ): number {
     if ( ! waiting && Splide.is( LOOP ) ) {
-      const diff        = position - getPosition();
-      const exceededMin = exceededLimit( false, position );
-      const exceededMax = exceededLimit( true, position );
+      const diff        = orient( position - getPosition() );
+      const exceededMin = exceededLimit( false, position ) && diff < 0;
+      const exceededMax = exceededLimit( true, position ) && diff > 0;
 
-      if ( ( exceededMin && diff > 0 ) || ( exceededMax && diff < 0 ) ) {
-        position += orient( sliderSize() * ( exceededMin ? 1 : -1 ) );
+      if ( exceededMin || exceededMax ) {
+        const excess = position - getLimit( exceededMax );
+        const size   = sliderSize();
+        position -= sign( excess ) * size * ceil( abs( excess ) / size );
       }
     }
 

src/js/components/Options/Options.ts

@@ -57,16 +57,12 @@ export function Options( Splide: Splide, Components: Components, options: Option
     }
 
     initialOptions = merge( {}, options );
-  }
 
-  /**
-   * Called when the component is mounted.
-   */
-  function mount(): void {
     const { breakpoints } = options;
-    const isMin = options.mediaQuery === 'min';
 
     if ( breakpoints ) {
+      const isMin = options.mediaQuery === 'min';
+
       points = Object.keys( breakpoints )
         .sort( ( n, m ) => isMin ? +m - +n : +n - +m )
         .map( point => [
@@ -74,11 +70,19 @@ export function Options( Splide: Splide, Components: Components, options: Option
           matchMedia( `(${ isMin ? 'min' : 'max' }-width:${ point }px)` ),
         ] );
 
-      addEventListener( 'resize', throttledObserve );
       observe();
     }
   }
 
+  /**
+   * Called when the component is mounted.
+   */
+  function mount(): void {
+    if ( points ) {
+      addEventListener( 'resize', throttledObserve );
+    }
+  }
+
   /**
    * Destroys the component.
    *

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

@@ -1,4 +1,4 @@
-import { CLASS_ACTIVE, CLASS_NEXT, CLASS_PREV, CLASS_VISIBLE } from '../../../constants/classes';
+import { CLASS_ACTIVE, CLASS_NEXT, CLASS_PREV, CLASS_SLIDE, CLASS_VISIBLE } from '../../../constants/classes';
 import {
   EVENT_ACTIVE,
   EVENT_CLICK,
@@ -123,15 +123,16 @@ describe( 'Slide', () => {
     expect( visibleSlides ).toEqual( [ Slide0, Slide1 ] );
   } );
 
-  test( 'can disable focus of focusable descendants when the slide is hidden.', () => {
-    const splide = init( { speed: 0 } );
-    const { Slides } = splide.Components;
-    const Slide0 = Slides.getAt( 0 );
+  test( 'can disable focus of focusable descendants when the slide gets hidden.', () => {
+    const splide = init( { speed: 0 }, { mount: false } );
+    const slide0 = document.querySelector( `.${ CLASS_SLIDE }` );
     const a      = document.createElement( 'a' );
     const button = document.createElement( 'button' );
 
-    Slide0.slide.appendChild( a );
-    Slide0.slide.appendChild( button );
+    slide0.appendChild( a );
+    slide0.appendChild( button );
+
+    splide.mount();
 
     splide.go( 1 );
     expect( a.tabIndex ).toBe( -1 );

src/js/components/Sync/Sync.ts

@@ -1,6 +1,13 @@
 import { ALL_ATTRIBUTES, ARIA_ORIENTATION, ROLE } from '../../constants/attributes';
 import { TTB } from '../../constants/directions';
-import { EVENT_CLICK, EVENT_MOVE, EVENT_NAVIGATION_MOUNTED, EVENT_SLIDE_KEYDOWN } from '../../constants/events';
+import {
+  EVENT_CLICK,
+  EVENT_MOUNTED,
+  EVENT_MOVE,
+  EVENT_NAVIGATION_MOUNTED,
+  EVENT_SLIDE_KEYDOWN,
+  EVENT_UPDATED,
+} from '../../constants/events';
 import { LOOP } from '../../constants/types';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
@@ -87,9 +94,17 @@ export function Sync( Splide: Splide, Components: Components, options: Options )
 
     on( EVENT_CLICK, onClick );
     on( EVENT_SLIDE_KEYDOWN, onKeydown );
-    emit( EVENT_NAVIGATION_MOUNTED, Splide.splides );
+    on( [ EVENT_MOUNTED, EVENT_UPDATED ], update );
 
     setAttribute( list, ROLE, 'menu' );
+
+    emit( EVENT_NAVIGATION_MOUNTED, Splide.splides );
+  }
+
+  /**
+   * Update attributes.
+   */
+  function update(): void {
     setAttribute( list, ARIA_ORIENTATION, options.direction !== TTB ? 'horizontal' : null );
   }
 

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

@@ -19,22 +19,20 @@ $settings = get_settings();
   <script>
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide = new Splide( '#splide01', {
-        type   : 'loop',
-        perPage: 3,
-        gap    : '1.5rem',
-        height : 400,
-        // start  : 2,
-        // focus  : 'center',
-        // cover  : true,
-        // speed: 1000,
-        // padding: '20%',
+        type             : 'loop',
+        perPage          : 3,
+        gap              : '1.5rem',
+        height           : 400,
         waitForTransition: false,
+        // direction        : 'ltr',
+        drag             : true,
         classes: {
           arrows: 'splide__arrows splide__test',
-          clone : 'splide__clone splide__test',
         },
         breakpoints: {
-          640: {
+          1000: {
+            // direction: 'rtl',
+            drag: false,
             perPage: 2,
           }
         },
@@ -64,6 +62,10 @@ $settings = get_settings();
     body {
       margin: 50em 0;
     }
+
+    .splide__slide {
+      overflow: hidden;
+    }
   </style>
 </head>
 <body>

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

@@ -23,6 +23,8 @@ $settings = get_settings();
         gap    : '1.5rem',
         drag   : 'free',
         height : 200,
+        type   : 'loop',
+        // direction: 'rtl',
       } );
 
       splide.mount();

src/js/transitions/Slide/Slide.ts

@@ -52,7 +52,7 @@ export function Slide( Splide: Splide, Components: Components, options: Options
 
     if ( abs( destination - position ) >= 1 && speed >= 1 ) {
       apply( `transform ${ speed }ms ${ options.easing }` );
-      Move.translate( destination );
+      Move.translate( destination, true );
       endCallback = done;
     } else {
       Move.jump( index );