Add the test for `>>` and `<<`.

src/js/components/Controller/test/slide.test.ts → src/js/components/Controller/test/go.test.ts

@@ -116,10 +116,33 @@ describe( 'Controller#go()', () => {
     expect( splide.index ).toBe( 0 );
   } );
 
+  test( 'can move the slider to the specified index with direction (internal use only).', () => {
+    const splide = init( { speed: 0, type: 'loop' } );
+
+    splide.go( '>>2' );
+    expect( splide.index ).toBe( 2 );
+
+    splide.go( '<<4' );
+    expect( splide.index ).toBe( 4 );
+
+    splide.go( '>>-1' );
+    expect( splide.index ).toBe( splide.length - 1 );
+
+    splide.go( '>>-2' );
+    expect( splide.index ).toBe( splide.length - 2 );
+  } );
+
   test( 'can move the slider to the end page.', () => {
     const splide = init( { speed: 0 } );
 
     splide.go( '>>' );
     expect( splide.index ).toBe( splide.length - 1 );
   } );
+
+  test( 'can move the slider to the first page.', () => {
+    const splide = init( { speed: 0 } );
+
+    splide.go( '<<' );
+    expect( splide.index ).toBe( 0 );
+  } );
 } );

src/js/core/Splide/Splide.ts

@@ -192,6 +192,8 @@ export class Splide {
    * | `'>'` | Goes to the next page |
    * | `'<'` | Goes to the previous page |
    * | `>${i}` | Goes to the page `i` |
+   * | `>>` | Goes to the first page |
+   * | `<<` | Goes to the last page |
    *
    * In most cases, `'>'` and `'<'` notations are enough to control the slider
    * because they respect `perPage` and `perMove` options.

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

@@ -32,8 +32,8 @@ $settings = get_settings();
         // updateOnMove: true,
         // direction: 'ltr',
         // height: undefined,
-        // gap: '30%',
-        paginationDirection: 'ttb',
+        // padding: '30%',
+        // paginationDirection: 'ttb',
         // rewindSpeed: 2000,
         // role: '',
         label: 'Changed Label',
@@ -43,6 +43,7 @@ $settings = get_settings();
         wheelAxis: 'xy',
         // wheelSleep: 200,
         // direction: 'rtl',
+        // drag: 'free',
 
         breakpoints: {
           1200: {
@@ -99,10 +100,7 @@ $settings = get_settings();
 
 
       document.querySelector( '#jump' ).addEventListener( 'click', () => {
-        splide.Components.Controller.jump( '>' );
-        console.log( splide.Components.Move.getRate() );
-        console.log( splide.Components.Move.getRate( 1 ) );
-        console.log( splide.Components.Move.getRate( 2 ) );
+        splide.Components.Controller.go( 160 );
       } );
 
 	    // Array.from( document.getElementsByTagName( 'button' ) ).forEach( button => {

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

@@ -22,15 +22,15 @@ $settings = get_settings();
         perPage: 3,
         gap    : '2em',
         drag   : 'free',
-	      snap   : true,
+	      // snap   : true,
         // height : 400,
         type   : 'loop',
         // direction: 'rtl',
         // waitForTransition: false,
       } );
 
-      splide.on( 'move', () => console.log( 'move' ) );
-      splide.on( 'moved', () => console.log( 'moved' ) );
+      // splide.on( 'move', () => console.log( 'move' ) );
+      // splide.on( 'moved', () => console.log( 'moved' ) );
       splide.on( 'dragging scrolling', () => {
         const bar = document.querySelector( '.bar' );
         bar.style.width = `${ splide.Components.Move.getRate() * 100 }%`;