Add onSwipeStart and onSwipeEnd hooks

docs/demos.jsx

@@ -32,6 +32,7 @@ import CustomPaging from '../examples/CustomPaging'
 import CustomSlides from '../examples/CustomSlides'
 import AsNavFor from '../examples/AsNavFor'
 import AppendDots from '../examples/AppendDots'
+import OnSwipeHook from '../examples/OnSwipeHook'
 
 export default class App extends React.Component {
   render() {
@@ -66,6 +67,7 @@ export default class App extends React.Component {
         <VerticalSwipeToSlide />
         <AsNavFor />
         <AppendDots />
+        <OnSwipeHook />
       </div>
     );
   }

examples/OnSwipeHook.js

@@ -0,0 +1,63 @@
+import React, { Component } from "react";
+import Slider from "../src/slider";
+
+export default class SimpleSlider extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      dragging: false
+    };
+  }
+
+  onSwipeStart() {
+    this.setState({
+      dragging: true
+    });
+  }
+
+  onSwipeEnd() {
+    this.setState({
+      dragging: false
+    });
+  }
+
+  render() {
+    const { dragging } = this.state;
+    const settings = {
+      dots: true,
+      infinite: true,
+      speed: 500,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      onSwipeStart: () => this.onSwipeStart(),
+      onSwipeEnd: () => this.onSwipeEnd()
+    };
+    return (
+      <div>
+        <h2> OnSwipe hooks</h2>
+        <Slider {...settings}>
+          <div>
+            <h3>1</h3>
+          </div>
+          <div>
+            <h3>2</h3>
+          </div>
+          <div>
+            <h3>3</h3>
+          </div>
+          <div>
+            <h3>4</h3>
+          </div>
+          <div>
+            <h3>5</h3>
+          </div>
+          <div>
+            <h3>6</h3>
+          </div>
+        </Slider>
+        <p>{dragging ? "dragging" : "not dragging"}</p>
+      </div>
+    );
+  }
+}

src/default-props.js

@@ -29,6 +29,8 @@ var defaultProps = {
   onInit: null,
   onLazyLoadError: null,
   onReInit: null,
+  onSwipeStart: null,
+  onSwipeEnd: null,
   pauseOnDotsHover: false,
   pauseOnFocus: false,
   pauseOnHover: true,

src/inner-slider.js

@@ -276,15 +276,15 @@ export class InnerSlider extends React.Component {
     let childrenCount = React.Children.count(this.props.children);
     const spec = { ...this.props, ...this.state, slideCount: childrenCount };
     let slideCount = getPreClones(spec) + getPostClones(spec) + childrenCount;
-    let trackWidth = 100 / this.props.slidesToShow * slideCount;
+    let trackWidth = (100 / this.props.slidesToShow) * slideCount;
     let slideWidth = 100 / slideCount;
     let trackLeft =
-      -slideWidth *
-      (getPreClones(spec) + this.state.currentSlide) *
-      trackWidth /
+      (-slideWidth *
+        (getPreClones(spec) + this.state.currentSlide) *
+        trackWidth) /
       100;
     if (this.props.centerMode) {
-      trackLeft += (100 - slideWidth * trackWidth / 100) / 2;
+      trackLeft += (100 - (slideWidth * trackWidth) / 100) / 2;
     }
     let trackStyle = {
       width: trackWidth + "%",
@@ -446,6 +446,11 @@ export class InnerSlider extends React.Component {
       this.disableBodyScroll();
     }
     let state = swipeStart(e, this.props.swipe, this.props.draggable);
+
+    if (this.props.onSwipeStart) {
+      this.props.onSwipeStart();
+    }
+
     state !== "" && this.setState(state);
   };
   swipeMove = e => {
@@ -470,6 +475,11 @@ export class InnerSlider extends React.Component {
       listRef: this.list,
       slideIndex: this.state.currentSlide
     });
+
+    if (this.props.onSwipeEnd) {
+      this.props.onSwipeEnd();
+    }
+
     if (!state) return;
     let triggerSlideHandler = state["triggerSlideHandler"];
     delete state["triggerSlideHandler"];