Add the `releaseTouch` option.

dist/js/splide.cjs.js

@@ -1792,14 +1792,15 @@ const Drag = (Splide, Components, options, event) => {
       state.set(DRAGGING);
       emit(EVENT_DRAG);
     }
+    if (shouldRelease(e)) {
+      return onPointerUp(e);
+    }
     if (e.cancelable) {
       if (dragging) {
         Move.translate(basePosition + constrain(diffCoord(e)));
         const expired = diffTime(e) > LOG_INTERVAL;
         const hasExceeded = exceeded !== (exceeded = exceededLimit());
-        if (expired || hasExceeded) {
-          save(e);
-        }
+        expired || hasExceeded && save(e);
         clickPrevented = true;
         emit(EVENT_DRAGGING);
         prevent(e);
@@ -1820,6 +1821,7 @@ const Drag = (Splide, Components, options, event) => {
     }
     binder.destroy();
     dragging = false;
+    exceeded = false;
   }
   function onClick(e) {
     if (!disabled && clickPrevented) {
@@ -1847,6 +1849,16 @@ const Drag = (Splide, Components, options, event) => {
     }
     reduce(true);
   }
+  function shouldRelease(e) {
+    if (options.releaseTouch && Splide.is(SLIDE) && isTouchEvent(e)) {
+      const { index } = Splide;
+      const diff = diffCoord(e);
+      if (exceededLimit() || index === 0 && diff > 0 || index === Splide.length - 1 && diff < 0) {
+        return true;
+      }
+    }
+    return false;
+  }
   function shouldStart(e) {
     const { dragMinThreshold: thresholds } = options;
     const isObj = isObject(thresholds);

dist/js/splide.esm.js

@@ -1788,14 +1788,15 @@ const Drag = (Splide, Components, options, event) => {
       state.set(DRAGGING);
       emit(EVENT_DRAG);
     }
+    if (shouldRelease(e)) {
+      return onPointerUp(e);
+    }
     if (e.cancelable) {
       if (dragging) {
         Move.translate(basePosition + constrain(diffCoord(e)));
         const expired = diffTime(e) > LOG_INTERVAL;
         const hasExceeded = exceeded !== (exceeded = exceededLimit());
-        if (expired || hasExceeded) {
-          save(e);
-        }
+        expired || hasExceeded && save(e);
         clickPrevented = true;
         emit(EVENT_DRAGGING);
         prevent(e);
@@ -1816,6 +1817,7 @@ const Drag = (Splide, Components, options, event) => {
     }
     binder.destroy();
     dragging = false;
+    exceeded = false;
   }
   function onClick(e) {
     if (!disabled && clickPrevented) {
@@ -1843,6 +1845,16 @@ const Drag = (Splide, Components, options, event) => {
     }
     reduce(true);
   }
+  function shouldRelease(e) {
+    if (options.releaseTouch && Splide.is(SLIDE) && isTouchEvent(e)) {
+      const { index } = Splide;
+      const diff = diffCoord(e);
+      if (exceededLimit() || index === 0 && diff > 0 || index === Splide.length - 1 && diff < 0) {
+        return true;
+      }
+    }
+    return false;
+  }
   function shouldStart(e) {
     const { dragMinThreshold: thresholds } = options;
     const isObj = isObject(thresholds);

dist/js/splide.js

@@ -1788,14 +1788,15 @@
         state.set(DRAGGING);
         emit(EVENT_DRAG);
       }
+      if (shouldRelease(e)) {
+        return onPointerUp(e);
+      }
       if (e.cancelable) {
         if (dragging) {
           Move.translate(basePosition + constrain(diffCoord(e)));
           const expired = diffTime(e) > LOG_INTERVAL;
           const hasExceeded = exceeded !== (exceeded = exceededLimit());
-          if (expired || hasExceeded) {
-            save(e);
-          }
+          expired || hasExceeded && save(e);
           clickPrevented = true;
           emit(EVENT_DRAGGING);
           prevent(e);
@@ -1816,6 +1817,7 @@
       }
       binder.destroy();
       dragging = false;
+      exceeded = false;
     }
     function onClick(e) {
       if (!disabled && clickPrevented) {
@@ -1833,7 +1835,7 @@
       const rewind = options.rewind && options.rewindByDrag;
       reduce(false);
       if (isFree) {
-        Controller.scroll(destination, 0, options.snap);
+        Controller.scroll(destination, void 0, options.snap);
       } else if (Splide.is(FADE)) {
         Controller.go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+");
       } else if (Splide.is(SLIDE) && exceeded && rewind) {
@@ -1843,6 +1845,16 @@
       }
       reduce(true);
     }
+    function shouldRelease(e) {
+      if (options.releaseTouch && Splide.is(SLIDE) && isTouchEvent(e)) {
+        const { index } = Splide;
+        const diff = diffCoord(e);
+        if (exceededLimit() || index === 0 && diff > 0 || index === Splide.length - 1 && diff < 0) {
+          return true;
+        }
+      }
+      return false;
+    }
     function shouldStart(e) {
       const { dragMinThreshold: thresholds } = options;
       const isObj = isObject(thresholds);

dist/types/index.d.ts

@@ -158,7 +158,7 @@ interface ElementCollection {
  *
  * @since 3.0.0
  */
-interface ElementsComponent extends BaseComponent, ElementCollection {
+interface ElementsComponent extends BaseComponent, Readonly<ElementCollection> {
 }
 
 /**
@@ -316,7 +316,7 @@ interface LazyLoadComponent extends BaseComponent {
  * @since 3.0.0
  */
 interface PaginationComponent extends BaseComponent {
-    items: PaginationItem[];
+    readonly items: PaginationItem[];
     getAt(index: number): PaginationItem;
     update(): void;
 }
@@ -326,8 +326,8 @@ interface PaginationComponent extends BaseComponent {
  * @since 3.0.0
  */
 interface PaginationData {
-    list: HTMLUListElement;
-    items: PaginationItem[];
+    readonly list: HTMLUListElement;
+    readonly items: PaginationItem[];
 }
 /**
  * The interface for each pagination item.
@@ -335,9 +335,9 @@ interface PaginationData {
  * @since 3.0.0
  */
 interface PaginationItem {
-    li: HTMLLIElement;
-    button: HTMLButtonElement;
-    page: number;
+    readonly li: HTMLLIElement;
+    readonly button: HTMLButtonElement;
+    readonly page: number;
 }
 
 /**
@@ -487,9 +487,15 @@ interface Options extends ResponsiveOptions {
      */
     wheelSleep?: number;
     /**
-     * Determines whether to release the wheel event when the slider reaches the first or last slide.
+     * Determines whether to release the wheel event when the carousel reaches the first or last slide.
      */
     releaseWheel?: boolean;
+    /**
+     * Determines whether to release the touch event when the carousel reaches the first or last slide.
+     * If `true`, the bounce effect will not play.
+     * Note that this does not affect mouse drag events.
+     */
+    releaseTouch?: boolean;
     /**
      * The direction of the slider.
      * - 'ltr': Left to right

src/js/components/Drag/Drag.ts

@@ -148,6 +148,10 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
       emit( EVENT_DRAG );
     }
 
+    if ( shouldRelease( e ) ) {
+      return onPointerUp( e );
+    }
+
     if ( e.cancelable ) {
       if ( dragging ) {
         Move.translate( basePosition + constrain( diffCoord( e ) ) );
@@ -155,10 +159,7 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
         const expired     = diffTime( e ) > LOG_INTERVAL;
         const hasExceeded = exceeded !== ( exceeded = exceededLimit() );
 
-        if ( expired || hasExceeded ) {
-          save( e );
-        }
-
+        expired || hasExceeded && save( e );
         clickPrevented = true;
         emit( EVENT_DRAGGING );
         prevent( e );
@@ -190,6 +191,7 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
 
     binder.destroy();
     dragging = false;
+    exceeded = false;
   }
 
   /**
@@ -230,7 +232,7 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
     reduce( false );
 
     if ( isFree ) {
-      Controller.scroll( destination, 0, options.snap );
+      Controller.scroll( destination, undefined, options.snap );
     } else if ( Splide.is( FADE ) ) {
       Controller.go( orient( sign( velocity ) ) < 0 ? ( rewind ? '<' : '-' ) : ( rewind ? '>' : '+' ) );
     } else if ( Splide.is( SLIDE ) && exceeded && rewind ) {
@@ -242,6 +244,24 @@ export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, o
     reduce( true );
   }
 
+  /**
+   * Checks if the provided touch event should be released or not.
+   *
+   * @param e - A TouchEvent or MouseEvent object.
+   */
+  function shouldRelease( e: TouchEvent | MouseEvent ): boolean {
+    if ( options.releaseTouch && Splide.is( SLIDE ) && isTouchEvent( e ) ) {
+      const { index } = Splide;
+      const diff = diffCoord( e );
+
+      if ( exceededLimit() || index === 0 && diff > 0 || index === Splide.length - 1 && diff < 0 ) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
   /**
    * Checks if the drag distance exceeds the defined threshold.
    *

src/js/types/options.ts

@@ -120,10 +120,17 @@ export interface Options extends ResponsiveOptions {
   wheelSleep?: number;
 
   /**
-   * Determines whether to release the wheel event when the slider reaches the first or last slide.
+   * Determines whether to release the wheel event when the carousel reaches the first or last slide.
    */
   releaseWheel?: boolean;
 
+  /**
+   * Determines whether to release the touch event when the carousel reaches the first or last slide.
+   * If `true`, the bounce effect will not play.
+   * Note that this does not affect mouse drag events.
+   */
+  releaseTouch?: boolean;
+
   /**
    * The direction of the slider.
    * - 'ltr': Left to right