Revise the `jump()` method for the fade type.

dist/js/splide.js

@@ -482,7 +482,7 @@
         return merge(merged2, entry[1]() ? entry[0] : {});
       }, {});
       omit(options);
-      set(merged);
+      set(merged, false, !state.is(CREATED));
       if (options.destroy) {
         Splide2.destroy(options.destroy === "completely");
       } else if (destroyed) {
@@ -500,7 +500,7 @@
     function set(opts, base, notify) {
       merge(options, opts);
       base && merge(Object.getPrototypeOf(options), opts);
-      if (notify || !state.is(CREATED)) {
+      if (notify) {
         Splide2.emit(EVENT_UPDATED, options);
       }
     }
@@ -1343,8 +1343,11 @@
       }
     }
     function jump(control) {
-      Move.cancel();
-      scroll(toPosition(loop(parse(control))), 0);
+      const { set } = Components2.Breakpoints;
+      const { speed } = options;
+      set({ speed: 0 });
+      go(control);
+      set({ speed });
     }
     function scroll(destination, duration, snap, callback) {
       Components2.Scroll.scroll(destination, duration, snap, () => {
@@ -2478,6 +2481,10 @@
       this._C.Controller.go(control);
       return this;
     }
+    jump(control) {
+      this._C.Controller.jump(control);
+      return this;
+    }
     on(events, callback) {
       this.event.on(events, callback);
       return this;

dist/types/index.d.ts

@@ -230,7 +230,7 @@ interface MoveComponent extends BaseComponent {
  */
 interface ControllerComponent extends BaseComponent {
     go(control: number | string, allowSameIndex?: boolean, callback?: AnyFunction): void;
-    jump(index: number): void;
+    jump(control: number | string): void;
     scroll(destination: number, duration?: number, snap?: boolean, callback?: AnyFunction): void;
     getNext(destination?: boolean): number;
     getPrev(destination?: boolean): number;
@@ -1024,7 +1024,7 @@ declare class Splide {
      */
     sync(splide: Splide): this;
     /**
-     * Moves the slider with the following control pattern.
+     * Moves the carousel with the following control pattern.
      *
      * | Pattern | Description |
      * |---|---|
@@ -1060,6 +1060,14 @@ declare class Splide {
      * @return `this`
      */
     go(control: number | string): this;
+    /**
+     * Moves the carousel without transition.
+     *
+     * @param control - A control pattern. See `move()` for more details.
+     *
+     * @return `this`
+     */
+    jump(control: number | string): this;
     /**
      * Registers an event handler.
      *

src/js/components/Breakpoints/Breakpoints.ts

@@ -110,7 +110,7 @@ export function Breakpoints(
     }, {} );
 
     omit( options );
-    set( merged );
+    set( merged, false, ! state.is( CREATED ) );
 
     if ( options.destroy ) {
       Splide.destroy( options.destroy === 'completely' );
@@ -144,13 +144,13 @@ export function Breakpoints(
    *
    * @param opts   - New options.
    * @param base   - Optional. Determines whether to also update base options or not.
-   * @param notify - Optional. If `true`, always emits the `update` event.
+   * @param notify - Optional. If `true`, emits the `update` event.
    */
   function set( opts: Options, base?: boolean, notify?: boolean ): void {
     merge( options, opts );
     base && merge( Object.getPrototypeOf( options ), opts );
 
-    if ( notify || ! state.is( CREATED ) ) {
+    if ( notify ) {
       Splide.emit( EVENT_UPDATED, options );
     }
   }

src/js/components/Controller/Controller.ts

@@ -166,8 +166,12 @@ export function Controller(
    * @param control - An index where to jump.
    */
   function jump( control: number | string ): void {
-    Move.cancel();
-    scroll( toPosition( loop( parse( control ) ) ), 0 );
+    const { set } = Components.Breakpoints;
+    const { speed } = options;
+
+    set( { speed: 0 } );
+    go( control );
+    set( { speed } );
   }
 
   /**

src/js/core/Splide/Splide.ts

@@ -182,7 +182,7 @@ export class Splide {
   }
 
   /**
-   * Moves the slider with the following control pattern.
+   * Moves the carousel with the following control pattern.
    *
    * | Pattern | Description |
    * |---|---|
@@ -222,6 +222,18 @@ export class Splide {
     return this;
   }
 
+  /**
+   * Moves the carousel without transition.
+   *
+   * @param control - A control pattern. See `move()` for more details.
+   *
+   * @return `this`
+   */
+  jump( control: number | string ): this {
+    this._C.Controller.jump( control );
+    return this;
+  }
+
   /**
    * Registers an event handler.
    *

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

@@ -22,8 +22,8 @@ $settings = get_settings();
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide = new Splide( '#splide01', {
         width: 800,
-        // type        : 'loop',
-        perPage: 3,
+        // type        : 'fade',
+        perPage: 2,
         // perMove: 3,
         // rewind: true,
         // rewindByDrag: true,
@@ -36,8 +36,8 @@ $settings = get_settings();
         // rewindSpeed: 2000,
         // role: '',
         label: 'Changed Label',
-        focus: 0,
-        omitEnd: true,
+        // focus: 0,
+        // omitEnd: true,
 
         breakpoints: {
           1200: {
@@ -94,7 +94,7 @@ $settings = get_settings();
 
 
       document.querySelector( '#jump' ).addEventListener( 'click', () => {
-        splide.Components.Controller.jump( '+2' )
+        splide.Components.Controller.jump( '>' )
       } );
 
 	    // Array.from( document.getElementsByTagName( 'button' ) ).forEach( button => {