fix swipe bugs

docs/index.tsx

@@ -39,9 +39,18 @@ class App extends React.Component {
   render() {
     return (
       <div>
+        <Carousel
+          style={{
+            width: 320
+          }}
+        >
+          <img src="//placehold.it/320x160?text=1of2" alt="a" />
+          <img src="//placehold.it/320x160?text=2of2" alt="a" />
+        </Carousel>
         <Carousel
           ref={(instance) => { this.carousel = instance; }}
           autoSlideInterval={3000}
+          useDots={true}
         >
           {this.state.count.map((c) => {
             return (

index.d.ts

@@ -10,9 +10,12 @@ export interface Touch {
 export interface CarouselProps {
     label?: string;
     useDots?: boolean;
-    dotStyle?: any;
+    dotStyle?: React.CSSProperties;
     duration?: number;
     autoSlideInterval?: number;
+    style?: React.CSSProperties;
+    nextComponent?: JSX.Element;
+    prevComponent?: JSX.Element;
 }
 export interface CarouselState {
     animate: boolean;
@@ -28,6 +31,7 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
     container: Element;
     swiping: boolean;
     moving: boolean;
+    direction: number;
     touch: Touch;
     timer: any;
     state: CarouselState;
@@ -40,7 +44,7 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
     render(): JSX.Element;
     renderInitialRect(): JSX.Element;
     renderCarouselChild(): JSX.Element | JSX.Element[];
-    renderDots(): JSX.Element;
+    renderControls(): JSX.Element;
     autoSlide(): void;
     resetAutoSlide(): void;
     addEvents(): void;
@@ -53,7 +57,7 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
     getPrevIndex(): number;
     getIndexDirection(index: any): 0 | 1 | -1;
     updateFrameRect(): void;
-    move(index: number): void;
+    move(index: number, direction?: number): void;
     next(): void;
     prev(): void;
     initialize(): void;

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "start": "webpack-dev-server",
     "prepare": "npm run test && npm run build",
-    "build": "tsc",
+    "build": "tsc -d --declarationDir ./",
     "docs": "webpack -p",
     "test:dom": "USE_DOM=true ava **/*.dom.test.js",
     "test:node": "ava **/*.node.test.js",

src/index.tsx

@@ -11,9 +11,12 @@ export interface Touch {
 export interface CarouselProps {
   label?: string;
   useDots?: boolean;
-  dotStyle?: any;
+  dotStyle?: React.CSSProperties;
   duration?: number;
   autoSlideInterval?: number;
+  style?: React.CSSProperties;
+  nextComponent?: JSX.Element;
+  prevComponent?: JSX.Element;
 }
 
 export interface CarouselState {
@@ -32,6 +35,7 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
   container: Element;
   swiping: boolean;
   moving: boolean;
+  direction: number;
   touch: Touch;
   timer;
 
@@ -99,14 +103,14 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
       return null;
     }
     return (
-      <div>
+      <div style={this.props.style}>
         <ul
           ref={(node) => (this.container = node)}
           style={(this.state.canUseDOM) ? this.getFrameStyle() : { width: '100%' }}
         >
           {this.renderCarouselChild()}
         </ul>
-        {this.renderDots()}
+        {this.renderControls()}
       </div>
     );
   }
@@ -136,7 +140,7 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
     });
   }
 
-  renderDots() {
+  renderControls() {
     if (!this.props.useDots || this.state.slideCount <= 1) {
       return null;
     }
@@ -242,7 +246,14 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
     const canDisplay = this.canDisplaySlide(index);
     const duration = this.swiping ? 0 : this.props.duration / 1000; // to milisec
     const transition = this.state.animate ? `transform ${duration}s ease` : null;
-    const direction = this.getIndexDirection(index);
+    let direction = this.getIndexDirection(index);
+    if (direction) {
+      if (this.touch) {
+        direction = this.touch.swipeDirection;
+      } else if (this.direction) {
+        direction = this.direction;
+      }
+    }
     let transform, msTransform;
     if (canDisplay) {
       if (direction === 0) {
@@ -293,8 +304,8 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
 
   getIndexDirection(index) {
     if (this.state.currentIndex === index) return 0;
-    if (this.getPrevIndex() === index) return -1;
     if (this.getNextIndex() === index) return 1;
+    if (this.getPrevIndex() === index) return -1;
     if (this.state.currentIndex < index) return 1;
     if (this.state.currentIndex > index) return -1;
   }
@@ -320,18 +331,19 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
     });
   }
 
-  move(index: number) {
+  move(index: number, direction: number = this.getIndexDirection(index)) {
     if (this.swiping || this.moving || this.state.currentIndex === index) {
       return;
     }
+    this.direction = direction;
     this.moving = true;
     this.setState({
       animate: true,
       showIndex: index
     }, () => {
       setTimeout(() => {
         this.setState({
-          swipePosition: this.getIndexDirection(index) * -this.state.slideWidth
+          swipePosition: direction * -this.state.slideWidth
         }, () => {
           setTimeout(() => {
             this.setState({
@@ -353,11 +365,11 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
   }
 
   next() {
-    this.move(this.getNextIndex());
+    this.move(this.getNextIndex(), 1);
   }
 
   prev() {
-    this.move(this.getPrevIndex());
+    this.move(this.getPrevIndex(), -1);
   }
 
   initialize() {

tsconfig.json

@@ -1,7 +1,5 @@
 {
   "compilerOptions": {
-    "declaration": true,
-    "declarationDir": "./",
     "allowUnreachableCode": true,
     "allowUnusedLabels": true,
     "sourceMap": true,