diff --git a/docs/demos.jsx b/docs/demos.jsx
index de6d67f6b..e255e0cbb 100644
--- a/docs/demos.jsx
+++ b/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 {
+
);
}
diff --git a/examples/OnSwipeHook.js b/examples/OnSwipeHook.js
new file mode 100644
index 000000000..deaa70ae0
--- /dev/null
+++ b/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 (
+
+
OnSwipe hooks
+
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+
6
+
+
+
{dragging ? "dragging" : "not dragging"}
+
+ );
+ }
+}
diff --git a/src/default-props.js b/src/default-props.js
index 8d828add3..1927643b7 100644
--- a/src/default-props.js
+++ b/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,
diff --git a/src/inner-slider.js b/src/inner-slider.js
index d3d115f1a..d83cc07de 100644
--- a/src/inner-slider.js
+++ b/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"];