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"];