Added support for passive event listeners

README.md

@@ -95,6 +95,7 @@ import Glider from "react-glider/glider.defaults.css";
 | responsive       | An object containing custom settings per provided breakpoint. Glider.js breakpoints are mobile-first, be conscious of your ordering. Supported responsive settings are `slidesToShow`, `slidesToScroll`, `itemWidth`, and `duration`.                       |
 | containerElement | Replace container HTML element.                                                                                                                                                                                                                             |
 | easing           | Use any custom easing function, compatible with most easing plugins.                                                                                                                                                                                        |
+| passiveListeners | If true, the component will use passive event listeners. (default = false)                                                                                                                                                                                                    |
 
 ### Arrows
 
@@ -212,6 +213,7 @@ function Example() {
       </button>
       <Glider
         className="glider-container"
+        passiveListeners
         draggable
         hasDots
         slidesToShow={1}

examples/autoplayGlider.tsx

@@ -39,6 +39,7 @@ function AutoplayGlider() {
     <div className="container">
       <Glider
         className="glider-container"
+        passiveListeners
         draggable
         hasDots
         slidesToShow={1}

examples/customEvents.tsx

@@ -8,6 +8,7 @@ function CustomEventsGlider() {
     <div className="container">
       <Glider
         className="glider-container"
+        passiveListeners
         draggable
         hasDots
         slidesToShow={3}

examples/fractionalSlidesGlider.tsx

@@ -7,6 +7,7 @@ function FractionalSlidesGlider() {
     <div className="container">
       <Glider
         className="glider-container"
+        passiveListeners
         draggable
         hasArrows
         hasDots

examples/gliderMethods.tsx

@@ -18,6 +18,7 @@ function RefGlider() {
       </button>
       <Glider
         className="glider-container"
+        passiveListeners
         draggable
         hasDots
         slidesToShow={1}

examples/multipleItemsGlider.tsx

@@ -7,6 +7,7 @@ function MultipleItemsGlider() {
     <div className="container">
       <Glider
         className="glider-container"
+        passiveListeners
         draggable
         hasArrows
         hasDots

examples/responsiveGlider.tsx

@@ -7,6 +7,7 @@ function ResponsiveGlider() {
     <div className="container">
       <Glider
         className="glider-container"
+        passiveListeners
         hasArrows
         hasDots
         slidesToShow={1}

examples/scrollToGlider.tsx

@@ -7,6 +7,7 @@ function ScrollToGlider() {
     <div className="container">
       <Glider
         className="glider-container"
+        passiveListeners
         draggable
         hasDots
         slidesToShow={3.5}

examples/singleItemGlider.tsx

@@ -7,6 +7,7 @@ function SingleItemGlider() {
     <div className="container">
       <Glider
         className="glider-container"
+        passiveListeners
         draggable
         hasDots
         slidesToShow={1}

examples/skipTrackGlider.tsx

@@ -7,6 +7,7 @@ function SkipTrackGlider() {
     <div className="container">
       <Glider
         className="glider-container"
+        passiveListeners
         draggable
         hasDots
         slidesToShow={3}

examples/updatingProps.tsx

@@ -19,6 +19,7 @@ function UpdatingPropsGlider() {
       </select>
       <Glider
         className="glider-container"
+        passiveListeners
         draggable
         hasDots
         slidesToShow={slidesToShow}

package.json

@@ -71,7 +71,7 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "glider-js": "^1.7.7"
+    "glider-js": "^1.7.9"
   },
   "peerDependencies": {
     "react": "^18.0.0",

src/types.ts

@@ -122,6 +122,11 @@ export interface GliderProps {
    */
   containerElement?: React.ElementType;
 
+  /**
+   * Use passive event listeners
+   */
+  passiveListeners?: boolean;
+
   /** use any custom easing function, compatible with most easing plugins */
   easing?(x: number, t: number, b: number, c: number, d: number): number;
 

yarn.lock

@@ -3647,10 +3647,10 @@ get-symbol-description@^1.0.0:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
-glider-js@^1.7.7:
-  version "1.7.7"
-  resolved "https://registry.yarnpkg.com/glider-js/-/glider-js-1.7.7.tgz#24508efecf6f20fd32b08b2940e4762e1c35fa23"
-  integrity sha512-jowNSpd/38EG0Kw83NgTo4F9YSAcpWQxBw0SFZcc2FysZD+dUuW/AcSeFU27rwGJilqdocKbw12IHOKi+DtpZw==
+glider-js@^1.7.9:
+  version "1.7.9"
+  resolved "https://registry.yarnpkg.com/glider-js/-/glider-js-1.7.9.tgz#a5b6adcc6ba4919c734207a81ed9deb4db2209eb"
+  integrity sha512-22r7EZ8cd4HWsM+pvNResu1h9tvJmAlrMBO2CbdJ9mhsYF/UllJEdvq8OuJDBgYcD0aja51vzRb/TbT7BCAaig==
 
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"