Add the `releaseWheel` option.

dist/js/splide-renderer.min.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.3.1
+ * Version  : 3.4.0
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.3.1
+ * Version  : 3.4.0
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -1441,6 +1441,7 @@ function Controller(Splide2, Components2, options) {
     scroll,
     getNext,
     getPrev,
+    getAdjacent,
     getEnd,
     setIndex,
     getIndex,
@@ -2185,10 +2186,14 @@ function Wheel(Splide2, Components2, options) {
   function onWheel(e) {
     const { deltaY } = e;
     if (deltaY) {
-      Splide2.go(deltaY < 0 ? "<" : ">");
-      prevent(e);
+      const backwards = deltaY < 0;
+      Splide2.go(backwards ? "<" : ">");
+      shouldPrevent(backwards) && prevent(e);
     }
   }
+  function shouldPrevent(backwards) {
+    return !options.releaseWheel || Splide2.state.is(MOVING) || Components2.Controller.getAdjacent(backwards) !== -1;
+  }
   return {
     mount
   };

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.3.1
+ * Version  : 3.4.0
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -1437,6 +1437,7 @@ function Controller(Splide2, Components2, options) {
     scroll,
     getNext,
     getPrev,
+    getAdjacent,
     getEnd,
     setIndex,
     getIndex,
@@ -2181,10 +2182,14 @@ function Wheel(Splide2, Components2, options) {
   function onWheel(e) {
     const { deltaY } = e;
     if (deltaY) {
-      Splide2.go(deltaY < 0 ? "<" : ">");
-      prevent(e);
+      const backwards = deltaY < 0;
+      Splide2.go(backwards ? "<" : ">");
+      shouldPrevent(backwards) && prevent(e);
     }
   }
+  function shouldPrevent(backwards) {
+    return !options.releaseWheel || Splide2.state.is(MOVING) || Components2.Controller.getAdjacent(backwards) !== -1;
+  }
   return {
     mount
   };

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 3.3.1
+ * Version  : 3.4.0
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -1722,6 +1722,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       scroll: scroll,
       getNext: getNext,
       getPrev: getPrev,
+      getAdjacent: getAdjacent,
       getEnd: getEnd,
       setIndex: setIndex,
       getIndex: getIndex,
@@ -2681,11 +2682,16 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       var deltaY = e.deltaY;
 
       if (deltaY) {
-        Splide2.go(deltaY < 0 ? "<" : ">");
-        prevent(e);
+        var backwards = deltaY < 0;
+        Splide2.go(backwards ? "<" : ">");
+        shouldPrevent(backwards) && prevent(e);
       }
     }
 
+    function shouldPrevent(backwards) {
+      return !options.releaseWheel || Splide2.state.is(MOVING) || Components2.Controller.getAdjacent(backwards) !== -1;
+    }
+
     return {
       mount: mount
     };

dist/types/components/Controller/Controller.d.ts

@@ -10,6 +10,7 @@ export interface ControllerComponent extends BaseComponent {
     scroll(destination: number, useIndex?: boolean, snap?: boolean, duration?: number, callback?: AnyFunction): void;
     getNext(destination?: boolean): number;
     getPrev(destination?: boolean): number;
+    getAdjacent(prev: boolean, destination?: boolean): number;
     getEnd(): number;
     setIndex(index: number): void;
     getIndex(prev?: boolean): number;

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

@@ -1 +1 @@
-{"version":3,"file":"Controller.d.ts","sourceRoot":"","sources":["Controller.ts"],"names":[],"mappings":"AAIA,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,mBAAoB,SAAQ,aAAa;IACxD,EAAE,CAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IACvF,MAAM,CAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IACnH,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,MAAM,IAAI,MAAM,CAAC;IACjB,QAAQ,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAChC,QAAQ,CAAE,IAAI,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACnC,OAAO,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,MAAM,CAAE,KAAK,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,MAAM,CAAE,QAAQ,EAAE,MAAM,GAAI,MAAM,CAAC;IACnC,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,mBAAmB,CAsU1G"}
+{"version":3,"file":"Controller.d.ts","sourceRoot":"","sources":["Controller.ts"],"names":[],"mappings":"AAIA,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,mBAAoB,SAAQ,aAAa;IACxD,EAAE,CAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IACvF,MAAM,CAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IACnH,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,WAAW,CAAE,IAAI,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IAC5D,MAAM,IAAI,MAAM,CAAC;IACjB,QAAQ,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAChC,QAAQ,CAAE,IAAI,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACnC,OAAO,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,MAAM,CAAE,KAAK,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,MAAM,CAAE,QAAQ,EAAE,MAAM,GAAI,MAAM,CAAC;IACnC,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,mBAAmB,CAyU1G"}

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

@@ -1 +1 @@
-{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["Wheel.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,cAAe,SAAQ,aAAa;CACpD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,cAAc,CA6BhG"}
+{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["Wheel.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,cAAe,SAAQ,aAAa;CACpD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,cAAc,CA2ChG"}

dist/types/types/options.d.ts

@@ -84,6 +84,10 @@ export interface Options extends ResponsiveOptions {
      * The `waitForTransition` option should be `true`.
      */
     wheel?: boolean;
+    /**
+     * Determines whether to release the wheel event when the slider reaches the first or last slide.
+     */
+    releaseWheel?: boolean;
     /**
      * The direction of the slider.
      * - 'ltr': Left to right

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

src/js/components/Controller/Controller.ts

@@ -17,6 +17,7 @@ export interface ControllerComponent extends BaseComponent {
   scroll( destination: number, useIndex?: boolean, snap?: boolean, duration?: number, callback?: AnyFunction ): void;
   getNext( destination?: boolean ): number;
   getPrev( destination?: boolean ): number;
+  getAdjacent( prev: boolean, destination?: boolean ): number;
   getEnd(): number;
   setIndex( index: number ): void;
   getIndex( prev?: boolean ): number;
@@ -189,6 +190,8 @@ export function Controller( Splide: Splide, Components: Components, options: Opt
   /**
    * Returns an adjacent destination index.
    *
+   * @internal
+   *
    * @param prev        - Determines whether to return a previous or next index.
    * @param destination - Optional. Determines whether to get a destination index or a slide one.
    *
@@ -355,6 +358,7 @@ export function Controller( Splide: Splide, Components: Components, options: Opt
     scroll,
     getNext,
     getPrev,
+    getAdjacent,
     getEnd,
     setIndex,
     getIndex,

src/js/components/Wheel/Wheel.ts

@@ -1,3 +1,4 @@
+import { MOVING } from '../../constants/states';
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
@@ -36,7 +37,7 @@ export function Wheel( Splide: Splide, Components: Components, options: Options
   }
 
   /**
-   * Called when the user rotates the mouse wheel.
+   * Called when the user rotates the mouse wheel on the slider.
    *
    * @param e - A WheelEvent object.
    */
@@ -44,11 +45,25 @@ export function Wheel( Splide: Splide, Components: Components, options: Options
     const { deltaY } = e;
 
     if ( deltaY ) {
-      Splide.go( deltaY < 0 ? '<' : '>' );
-      prevent( e );
+      const backwards = deltaY < 0;
+      Splide.go( backwards ? '<' : '>' );
+      shouldPrevent( backwards ) && prevent( e );
     }
   }
 
+  /**
+   * Checks whether the component should prevent the default action of the wheel event or not.
+   *
+   * @param backwards - Set this to `true` for backwards direction.
+   *
+   * @return `true` if the action should be prevented.
+   */
+  function shouldPrevent( backwards: boolean ): boolean {
+    return ! options.releaseWheel
+      || Splide.state.is( MOVING )
+      || Components.Controller.getAdjacent( backwards ) !== -1;
+  }
+
   return {
     mount,
   };

src/js/test/php/examples/multiple.php

@@ -13,7 +13,7 @@ $settings = get_settings();
   <title>Multiple</title>
 
   <link rel="stylesheet" href="../../../../../dist/css/splide-core.min.css">
-<!--  <link rel="stylesheet" href="../../../../../dist/css/themes/splide---><?php //echo $settings['theme'] ?><!--.min.css">-->
+  <link rel="stylesheet" href="../../../../../dist/css/themes/splide-<?php echo $settings['theme'] ?>.min.css">
   <link rel="stylesheet" href="../../assets/css/styles.css">
   <script type="text/javascript" src="../../../../../dist/js/splide.js"></script>
 
@@ -139,5 +139,26 @@ $settings = get_settings();
 <?php render( 'splide08' ); ?>
 <?php render( 'splide09' ); ?>
 
+<script>
+  Array.from( document.querySelectorAll( '.splide' ) ).forEach( elm => {
+    const splide   = new Splide( elm, { rewind: true, interval: 1000 } ).mount();
+    const Autoplay = splide.Components.Autoplay;
+    const observer = new IntersectionObserver( ( [ entry ] ) => {
+      entry.isIntersecting ? Autoplay.play() : Autoplay.pause();
+    }, { threshold: 0.8 } );
+    observer.observe( elm );
+  } );
+
+  // for ( let i = 0; i < elms.length; i++ ) {
+  //   const elm = elms[ i ];
+  //   const splide = new Splide( elm, { ...... } ).mount();
+  //   const Autoplay = splide.Components.Autoplay;
+  //   const observer = new IntersectionObserver( ( [ entry ] ) => {
+  //     entry.isIntersecting ? Autoplay.play() : Autoplay.pause();
+  //   } );
+  //   observer.observe( elm );
+  // }
+</script>
+
 </body>
 </html>

src/js/test/php/examples/ttb.php

@@ -20,7 +20,7 @@ $settings = get_settings();
     document.addEventListener( 'DOMContentLoaded', function () {
       var splide = new Splide( '#splide01', {
         width    : 400,
-        type     : 'loop',
+        // type     : 'loop',
         perPage  : 2,
         padding  : '3rem',
         gap      : 5,
@@ -28,6 +28,7 @@ $settings = get_settings();
         height   : '90vh',
         cover    : true,
         wheel    : true,
+        // releaseWheel: true,
       } );
 
       splide.mount();

src/js/types/options.ts

@@ -99,6 +99,11 @@ export interface Options extends ResponsiveOptions {
    */
   wheel?: boolean;
 
+  /**
+   * Determines whether to release the wheel event when the slider reaches the first or last slide.
+   */
+  releaseWheel?: boolean;
+
   /**
    * The direction of the slider.
    * - 'ltr': Left to right