Ensuring that drag does not move slides more than allows

Author: Andrey Nelyubin

dist/js/splide-renderer.min.js

@@ -2,7 +2,7 @@
  * Splide.js
  * Version  : 4.1.4
  * License  : MIT
- * Copyright: 2022 Naotoshi Fujita
+ * Copyright: 2023 Naotoshi Fujita
  */
 'use strict';
 
@@ -2264,7 +2264,11 @@ function Drag(Splide2, Components2, options) {
     } else if (Splide2.is(SLIDE) && exceeded && rewind) {
       Controller.go(exceededLimit(true) ? ">" : "<");
     } else {
-      Controller.go(Controller.toDest(destination), true);
+      var sign1 = sign(velocity);
+      var expectedDestination = Controller.toDest(destination);
+      var maxPages = options.flickMaxPages || 1;
+      var goTo = sign1 < 0 ? min(expectedDestination, Splide2.index + maxPages) : max(expectedDestination, Splide2.index - maxPages);
+      Controller.go(goTo, true);
     }
 
     reduce(true);

dist/js/splide-renderer.min.js.map

@@ -6,7 +6,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
  * Splide.js
  * Version  : 4.1.4
  * License  : MIT
- * Copyright: 2022 Naotoshi Fujita
+ * Copyright: 2023 Naotoshi Fujita
  */
 var MEDIA_PREFERS_REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
 var CREATED = 1;
@@ -2259,7 +2259,11 @@ function Drag(Splide2, Components2, options) {
     } else if (Splide2.is(SLIDE) && exceeded && rewind) {
       Controller.go(exceededLimit(true) ? ">" : "<");
     } else {
-      Controller.go(Controller.toDest(destination), true);
+      var sign1 = sign(velocity);
+      var expectedDestination = Controller.toDest(destination);
+      var maxPages = options.flickMaxPages || 1;
+      var goTo = sign1 < 0 ? min(expectedDestination, Splide2.index + maxPages) : max(expectedDestination, Splide2.index - maxPages);
+      Controller.go(goTo, true);
     }
 
     reduce(true);

dist/js/splide.cjs.js

@@ -6,7 +6,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
  * Splide.js
  * Version  : 4.1.4
  * License  : MIT
- * Copyright: 2022 Naotoshi Fujita
+ * Copyright: 2023 Naotoshi Fujita
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Splide = factory());
@@ -2257,7 +2257,11 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       } else if (Splide2.is(SLIDE) && exceeded && rewind) {
         Controller.go(exceededLimit(true) ? ">" : "<");
       } else {
-        Controller.go(Controller.toDest(destination), true);
+        var sign1 = sign(velocity);
+        var expectedDestination = Controller.toDest(destination);
+        var maxPages = options.flickMaxPages || 1;
+        var goTo = sign1 < 0 ? min(expectedDestination, Splide2.index + maxPages) : max(expectedDestination, Splide2.index - maxPages);
+        Controller.go(goTo, true);
       }
 
       reduce(true);

dist/js/splide.esm.js

@@ -6,7 +6,7 @@ import { FADE, LOOP, SLIDE } from '../../constants/types';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { abs, isObject, matches, min, noop, prevent, sign, timeOf } from '../../utils';
+import { abs, isObject, matches, min, max, noop, prevent, sign, timeOf } from '../../utils';
 import { FRICTION, LOG_INTERVAL, POINTER_DOWN_EVENTS, POINTER_MOVE_EVENTS, POINTER_UP_EVENTS } from './constants';
 
 
@@ -237,7 +237,11 @@ export function Drag( Splide: Splide, Components: Components, options: Options )
     } else if ( Splide.is( SLIDE ) && exceeded && rewind ) {
       Controller.go( exceededLimit( true ) ? '>' : '<' );
     } else {
-      Controller.go( Controller.toDest( destination ), true );
+      const sign1 = sign( velocity );
+      const expectedDestination = Controller.toDest( destination );
+      const maxPages = options.flickMaxPages || 1;
+      const goTo = sign1 < 0 ? min( expectedDestination, Splide.index + maxPages ) : max( expectedDestination, Splide.index - maxPages );
+      Controller.go( goTo, true );
     }
 
     reduce( true );

dist/js/splide.js

@@ -60,6 +60,20 @@ describe( 'Drag', () => {
     expect( splide.index ).toBe( 0 );
   } );
 
+  test.each( [ 1, 2 ] )( 'should change the slide index no longer than flickMaxPages (%s).', ( flickMaxPages ) => {
+    const width = 600;
+    const xOffset = width * flickMaxPages;
+    const splide = init( { speed: 0, width, flickMaxPages } );
+    const track  = splide.Components.Elements.track;
+
+    fireWithCoord( track, 'mousedown', { x: 0, timeStamp: 1 } );
+    fireWithCoord( window, 'mousemove', { x: 1, timeStamp: 1 } );
+    fireWithCoord( window, 'mousemove', { x: -20 - xOffset, timeStamp: 100 } );
+    fireWithCoord( window, 'mouseup',   { x: -20 - xOffset, timeStamp: 100 } );
+
+    expect( splide.index ).toBe( flickMaxPages );
+  } );
+
   test( 'should start moving the slider immediately if the pointing device is a mouse.', () => {
     const splide = init();
     const onDrag = jest.fn();