├── typings
    ├── custom.d.ts
    └── index.d.ts
├── examples
    ├── index.html
    └── index.tsx
├── src
    ├── index.tsx
    ├── decorators.tsx
    └── carousel.tsx
├── index.js
├── tests
    ├── index.js
    ├── helpers
    │   ├── phantomjs-shims.tsx
    │   └── raf-polyfill.tsx
    └── specs
    │   └── carousel.spec.tsx
├── tsconfig.json
├── HISTORY.md
├── .gitignore
├── LICENSE
├── package.json
├── .eslintrc
└── README.md


/typings/custom.d.ts:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
1 | placeholder


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './carousel';


--------------------------------------------------------------------------------
/typings/index.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference path="custom.d.ts" />


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | var Carousel = require('./lib/carousel');
4 | 
5 | module.exports = Carousel;
6 | 


--------------------------------------------------------------------------------
/tests/index.js:
--------------------------------------------------------------------------------
1 | import './helpers/phantomjs-shims';
2 | import  './helpers/raf-polyfill';
3 | import './specs/carousel.spec';


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "strictNullChecks": true,
4 |     "moduleResolution": "node",
5 |     "jsx": "preserve",
6 |     "allowSyntheticDefaultImports": true,
7 |     "target": "es6"
8 |   }
9 | }


--------------------------------------------------------------------------------
/HISTORY.md:
--------------------------------------------------------------------------------
1 | # History
2 | ----
3 | 
4 | ## 3.0.0 / 2017-09-19
5 | 
6 | - `easing`/`edgeEasing`'s type change from string to Function. And change [tween-functions](https://github.com/chenglou/tween-functions) from "built-in" to "external".


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | ### SublimeText ###
 2 | *.sublime-workspace
 3 | 
 4 | ### OSX ###
 5 | .DS_Store
 6 | .AppleDouble
 7 | .LSOverride
 8 | Icon
 9 | 
10 | # Thumbnails
11 | ._*
12 | 
13 | # Files that might appear on external disk
14 | .Spotlight-V100
15 | .Trashes
16 | 
17 | ### Windows ###
18 | # Windows image file caches
19 | Thumbs.db
20 | ehthumbs.db
21 | 
22 | # Folder config file
23 | Desktop.ini
24 | 
25 | # Recycle Bin used on file shares
26 | $RECYCLE.BIN/
27 | 
28 | # App specific
29 | 
30 | node_modules/
31 | bower_components/
32 | .tmp
33 | dist
34 | /src/scripts/main.js
35 | 
36 | *.log
37 | *.log.*
38 | yarn.lock
39 | _ts2js
40 | package-lock.json


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/tests/helpers/phantomjs-shims.tsx:
--------------------------------------------------------------------------------
 1 | (function() {
 2 | 
 3 | var Ap = Array.prototype;
 4 | var slice = Ap.slice;
 5 | var Fp = Function.prototype;
 6 | 
 7 | if (!Fp.bind) {
 8 |   // PhantomJS doesn't support Function.prototype.bind natively, so
 9 |   // polyfill it whenever this module is required.
10 |   Fp.bind = function(context) {
11 |     var func = this;
12 |     var args = slice.call(arguments, 1);
13 | 
14 |     function bound() {
15 |       var invokedAsConstructor = func.prototype && (this instanceof func);
16 |       return func.apply(
17 |         // Ignore the context parameter when invoking the bound function
18 |         // as a constructor. Note that this includes not only constructor
19 |         // invocations using the new keyword but also calls to base class
20 |         // constructors such as BaseClass.call(this, ...) or super(...).
21 |         !invokedAsConstructor && context || this,
22 |         args.concat(slice.call(arguments))
23 |       );
24 |     }
25 | 
26 |     // The bound function must share the .prototype of the unbound
27 |     // function so that any object created by one constructor will count
28 |     // as an instance of both constructors.
29 |     bound.prototype = func.prototype;
30 | 
31 |     return bound;
32 |   };
33 | }
34 | })();
35 | 


--------------------------------------------------------------------------------
/tests/helpers/raf-polyfill.tsx:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
 5 | 
 6 | // MIT license
 7 | 
 8 | (function() {
 9 |     var lastTime = 0;
10 |     var vendors = ['ms', 'moz', 'webkit', 'o'];
11 |     for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
12 |         window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
13 |         window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
14 |                                    || window[vendors[x]+'CancelRequestAnimationFrame'];
15 |     }
16 | 
17 |     if (!window.requestAnimationFrame)
18 |         window.requestAnimationFrame = function(callback) {
19 |             var currTime = new Date().getTime();
20 |             var timeToCall = Math.max(0, 16 - (currTime - lastTime));
21 |             var id = window.setTimeout(function() { callback(currTime + timeToCall); },
22 |               timeToCall);
23 |             lastTime = currTime + timeToCall;
24 |             return id;
25 |         };
26 | 
27 |     if (!window.cancelAnimationFrame)
28 |         window.cancelAnimationFrame = function(id) {
29 |             clearTimeout(id);
30 |         };
31 | }());


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "rmc-nuka-carousel",
 3 |   "version": "3.0.1",
 4 |   "description": "Pure React Carousel",
 5 |   "main": "./lib/index",
 6 |   "module": "./es/index",
 7 |   "dependencies": {
 8 |     "exenv": "^1.2.0",
 9 |     "raf": "^3.3.2"
10 |   },
11 |   "devDependencies": {
12 |     "@types/mocha": "~2.2.32",
13 |     "@types/react": "~16.0.2",
14 |     "@types/react-dom": "15.5.1",
15 |     "expect.js": "0.3.x",
16 |     "pre-commit": "1.x",
17 |     "rc-test": "~6.0.3",
18 |     "rc-tools": "6.x",
19 |     "react": "^15.0.0",
20 |     "react-dom": "^15.0.0",
21 |     "tween-functions": "^1.2.0"
22 |   },
23 |   "files": [
24 |     "lib",
25 |     "es",
26 |     "dist"
27 |   ],
28 |   "config": {
29 |     "port": 8000,
30 |     "entry": {
31 |       "rmc-nuka-carousel": [
32 |         "./index.js"
33 |       ]
34 |     }
35 |   },
36 |   "scripts": {
37 |     "dist": "rc-tools run dist",
38 |     "watch-tsc": "rc-tools run watch-tsc",
39 |     "compile": "rc-tools run compile --babel-runtime",
40 |     "build": "rc-tools run build",
41 |     "gh-pages": "rc-tools run gh-pages",
42 |     "start": "rc-tools run server",
43 |     "prepublish": "rc-tools run guard",
44 |     "prepare": "rc-tools run guard",
45 |     "prepublishOnly": "rc-tools run guard",
46 |     "pub": "rc-tools run pub --babel-runtime",
47 |     "lint": "rc-tools run lint",
48 |     "karma": "rc-test run karma",
49 |     "test": "rc-test run test",
50 |     "chrome-test": "rc-test run chrome-test",
51 |     "coverage": "rc-test run coverage"
52 |   },
53 |   "repository": {
54 |     "type": "git",
55 |     "url": "https://github.com/react-component/nuka-carousel.git"
56 |   },
57 |   "keywords": [
58 |     "react",
59 |     "carousel",
60 |     "nuka"
61 |   ],
62 |   "author": "Ken Wheeler",
63 |   "license": "MIT",
64 |   "bugs": {
65 |     "url": "https://github.com/react-component/nuka-carousel/issues"
66 |   },
67 |   "homepage": "https://github.com/react-component/nuka-carousel"
68 | }
69 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "env": {
 3 |         "node": true,
 4 |         "browser": true,
 5 |         "mocha": true
 6 |     },
 7 |     "globals": {
 8 |         "navigator",
 9 |         "$serverSide",
10 |         "$isiOS",
11 |         "$isAndroid",
12 |         "$isBrowser"
13 |     },
14 |     "parser": "babel-eslint",
15 |     "ecmaFeatures": {
16 |         "arrowFunctions": true,
17 |         "binaryLiterals": true,
18 |         "blockBindings": true,
19 |         "classes": true,
20 |         "defaultParams": true,
21 |         "destructuring": true,
22 |         "forOf": true,
23 |         "generators": true,
24 |         "modules": true,
25 |         "objectLiteralComputedProperties": true,
26 |         "objectLiteralDuplicateProperties": true,
27 |         "objectLiteralShorthandMethods": true,
28 |         "objectLiteralShorthandProperties": true,
29 |         "spread": true,
30 |         "superInFunctions": true,
31 |         "templateStrings": true,
32 |         "unicodeCodePointEscapes": true,
33 |         "jsx": true
34 |     },
35 |     "rules": {
36 | 
37 |         // Lint Rules
38 | 
39 |         "no-bitwise": 2,
40 |         "eqeqeq": 2,
41 |         "guard-for-in": 2,
42 |         "no-use-before-define": 2,
43 |         "no-caller": 2,
44 |         "no-new": 0,
45 |         "no-undef": 0, // Fix Me
46 |         "no-unused-vars": 0, // Fix Me
47 |         "strict": 0,
48 |         "max-params": [2, 5],
49 |         "semi": 0,
50 |         "no-cond-assign": 0,
51 |         "no-loop-func": 0,
52 |         "no-shadow": 0,
53 |         "no-underscore-dangle": 0,
54 | 
55 |         // Style Rules
56 | 
57 |         "no-with": 1,
58 |         "no-eval": 1,
59 |         "space-after-keywords": 1,
60 | 
61 |         "curly": [1, "all"],
62 |         "space-before-blocks": 1,
63 |         "no-empty": 1,
64 | 
65 |         "space-before-function-paren": [1, "never"],
66 |         "wrap-iife": 1,
67 | 
68 |         "space-in-parens": [1, "never"],
69 | 
70 |         "space-infix-ops": 1,
71 |         "dot-notation": 1,
72 | 
73 |         "camelcase": 1,
74 |         "no-multi-str": 1,
75 | 
76 |         "no-mixed-spaces-and-tabs": 1,
77 |         "no-trailing-spaces": 1,
78 |         "eol-last" : 1,
79 | 
80 |         "comma-spacing": [1, {"before": false, "after": true}],
81 |         "indent": [1, 2],
82 |         "quotes": [1, "single"]
83 |     }
84 | }
85 | 


--------------------------------------------------------------------------------
/examples/index.tsx:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | import Carousel from '../src/carousel';
 4 | import React from 'react';
 5 | import ReactDom from 'react-dom';
 6 | import easingTypes, { easeOutElastic } from 'tween-functions';
 7 | 
 8 | class App extends React.Component<any, any> {
 9 |   state = {
10 |     slideIndex: 0,
11 |   };
12 | 
13 |   render() {
14 |     return (<div>
15 |       <Carousel
16 |         style={{ minHeight: 100 }}
17 |         autoplay
18 |         wrapAround
19 |         autoplayInterval={2000}
20 |         resetAutoplay={false}
21 |         slideIndex={this.state.slideIndex}
22 |         afterSlide={newSlideIndex => this.setState({ slideIndex: newSlideIndex })}>
23 |         <img src="http://placehold.it/1000x400&text=slide1" style={{ maxWidth: '100%' }} />
24 |         <img src="http://placehold.it/1000x400&text=slide2" style={{ maxWidth: '100%' }} />
25 |         <img src="http://placehold.it/1000x400&text=slide3" style={{ maxWidth: '100%' }} />
26 |         <img src="http://placehold.it/1000x400&text=slide4" style={{ maxWidth: '100%' }} />
27 |         <img src="http://placehold.it/1000x400&text=slide5" style={{ maxWidth: '100%' }} />
28 |         <img src="http://placehold.it/1000x400&text=slide6" style={{ maxWidth: '100%' }} />
29 |       </Carousel>
30 |       <div style={{width: '50%', margin: 'auto'}}>
31 |         <button onClick={() => this.setState({ slideIndex: 0 })}>1</button>
32 |         <button onClick={() => this.setState({ slideIndex: 1 })}>2</button>
33 |         <button onClick={() => this.setState({ slideIndex: 2 })}>3</button>
34 |         <button onClick={() => this.setState({ slideIndex: 3 })}>4</button>
35 |         <button onClick={() => this.setState({ slideIndex: 4 })}>5</button>
36 |         <button onClick={() => this.setState({ slideIndex: 5 })}>6</button>
37 |       </div>
38 | 
39 |       <Carousel
40 |         className="space-carousel"
41 |         cellSpacing={-60}
42 |         autoplay
43 |         wrapAround
44 |         slideIndex={this.state.slideIndex}
45 |         afterSlide={newSlideIndex => this.setState({ slideIndex: newSlideIndex })}>
46 |         <img src="https://gw.alipayobjects.com/zos/rmsportal/hCyqdPEXhsCRfOXJFQbC.png" />
47 |         <img src="https://gw.alipayobjects.com/zos/rmsportal/QCuJKZxSjlRCtMzagoYS.png" />
48 |         <img src="https://gw.alipayobjects.com/zos/rmsportal/YHuGiyKMKMHysahEdDNO.png" />
49 |         <img src="https://gw.alipayobjects.com/zos/rmsportal/yUrSLGXUQPiyTTToFwQb.png" />
50 |         <img src="https://gw.alipayobjects.com/zos/rmsportal/aKFkXZsPOaTsQfIHOEJy.png" />
51 |       </Carousel>
52 |       <style dangerouslySetInnerHTML={{
53 |         __html: `.space-carousel img { max-width: 300px; margin: 0 auto }`
54 |       }} />
55 |     </div>);
56 |   }
57 | }
58 | 
59 | ReactDom.render(<App />, document.getElementById('__react-content'));
60 | 


--------------------------------------------------------------------------------
/src/decorators.tsx:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | import React from 'react';
  4 | 
  5 | export interface IDecoratorProps {
  6 |   currentSlide: number;
  7 |   slideCount: number;
  8 |   frameWidth: number | string;
  9 |   slideWidth: number | string;
 10 |   slidesToScroll: number;
 11 |   cellSpacing?: number;
 12 |   slidesToShow?: number;
 13 |   wrapAround?: boolean;
 14 |   nextSlide?: () => void;
 15 |   previousSlide: () => void;
 16 |   goToSlide?: (index: number) => void;
 17 | }
 18 | 
 19 | const DefaultDecorators = [
 20 |   {
 21 |     component: class extends React.Component<IDecoratorProps, any> {
 22 |       render() {
 23 |         return (
 24 |           <button
 25 |             style={this.getButtonStyles(this.props.currentSlide === 0 && !this.props.wrapAround)}
 26 |             onClick={this.handleClick}>PREV</button>
 27 |         );
 28 |       }
 29 |       handleClick = (e) => {
 30 |         e.preventDefault();
 31 |         this.props.previousSlide();
 32 |       }
 33 |       getButtonStyles(disabled) {
 34 |         return {
 35 |           border: 0,
 36 |           background: 'rgba(0,0,0,0.4)',
 37 |           color: 'white',
 38 |           padding: 10,
 39 |           outline: 0,
 40 |           opacity: disabled ? 0.3 : 1,
 41 |           cursor: 'pointer',
 42 |         };
 43 |       }
 44 |     },
 45 |     position: 'CenterLeft',
 46 |   },
 47 |   {
 48 |     component: class extends React.Component<IDecoratorProps, any> {
 49 |       render() {
 50 |         return (
 51 |           <button
 52 |             style={
 53 |               this.getButtonStyles(
 54 |                 this.props.currentSlide + this.props.slidesToScroll >= this.props.slideCount && !this.props.wrapAround,
 55 |               )
 56 |             }
 57 |             onClick={this.handleClick}>NEXT</button>
 58 |         );
 59 |       }
 60 |       handleClick = (e) => {
 61 |         e.preventDefault();
 62 |         if (this.props.nextSlide) {
 63 |           this.props.nextSlide();
 64 |         }
 65 |       }
 66 |       getButtonStyles(disabled) {
 67 |         return {
 68 |           border: 0,
 69 |           background: 'rgba(0,0,0,0.4)',
 70 |           color: 'white',
 71 |           padding: 10,
 72 |           outline: 0,
 73 |           opacity: disabled ? 0.3 : 1,
 74 |           cursor: 'pointer',
 75 |         };
 76 |       }
 77 |     },
 78 |     position: 'CenterRight',
 79 |   },
 80 |   {
 81 |     component: class extends React.Component<IDecoratorProps, any> {
 82 |       render() {
 83 |         const indexes = this.getIndexes(this.props.slideCount, this.props.slidesToScroll);
 84 |         return (
 85 |           <ul style={this.getListStyles()}>
 86 |             {
 87 |               indexes.map((index) => {
 88 |                 return (
 89 |                   <li style={this.getListItemStyles()} key={index}>
 90 |                     <button
 91 |                       style={this.getButtonStyles(this.props.currentSlide === index)}
 92 |                       onClick={this.props.goToSlide && this.props.goToSlide.bind(null, index)}>
 93 |                       &bull;
 94 |                     </button>
 95 |                   </li>
 96 |                 );
 97 |               })
 98 |             }
 99 |           </ul>
100 |         );
101 |       }
102 |       getIndexes(count, inc) {
103 |         let arr: number[] = [];
104 |         for (let i = 0; i < count; i += inc) {
105 |           arr.push(i);
106 |         }
107 |         return arr;
108 |       }
109 |       getListStyles() {
110 |         return {
111 |           position: 'relative',
112 |           margin: 0,
113 |           top: -10,
114 |           padding: 0,
115 |         } as React.CSSProperties;
116 |       }
117 |       getListItemStyles() {
118 |         return {
119 |           listStyleType: 'none',
120 |           display: 'inline-block',
121 |         } as React.CSSProperties;
122 |       }
123 |       getButtonStyles(active) {
124 |         return {
125 |           border: 0,
126 |           background: 'transparent',
127 |           color: 'black',
128 |           cursor: 'pointer',
129 |           padding: 10,
130 |           outline: 0,
131 |           fontSize: 24,
132 |           opacity: active ? 1 : 0.5,
133 |         };
134 |       }
135 |     },
136 |     position: 'BottomCenter',
137 |   },
138 | ];
139 | 
140 | export default DefaultDecorators;
141 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | ## Modify from upstream nuka-carousel@2.0.4
  3 | > Search for `by warmhug` comments in source file to see detailed changes.
  4 | > This fork stream's version begin from `2.2.0` and the npm package name is `rmc-nuka-carousel`.
  5 | 
  6 | - add `swipeSpeed` prop, you can configure the swipe sensitivity.
  7 | - add `resetAutoplay` props, when set false, you can remove the sense of frustration between the items to switch.（自动循环播放时、第一个和第二个项目之间切换时的顿挫感）
  8 | 
  9 | Note: if you set `autoplayInterval` prop to less than 1000, You need to set the `speed` prop to less than 300 at the same time.
 10 | 
 11 | #### develop
 12 | 
 13 | ```sh
 14 | npm install
 15 | npm start # Running demo locally
 16 | ```
 17 | 
 18 | ------------
 19 | 
 20 | # nuka-carousel
 21 | 
 22 | A Pure ReactJS Carousel Component
 23 | 
 24 | ![http://i.imgur.com/UwP5gle.gif](http://i.imgur.com/UwP5gle.gif)
 25 | 
 26 | ### Install
 27 | 
 28 | ```
 29 | npm install nuka-carousel
 30 | ```
 31 | 
 32 | ### Example
 33 | 
 34 | see examples dir
 35 | 
 36 | ### Props
 37 | 
 38 | #### afterSlide
 39 | `React.PropTypes.func`
 40 | 
 41 | Hook to be called after a slide is changed.
 42 | 
 43 | #### autoplay
 44 | `React.PropTypes.bool`
 45 | 
 46 | Autoplay mode active. Defaults to false.
 47 | 
 48 | #### autoplayInterval
 49 | `React.PropTypes.number`
 50 | 
 51 | Interval for autoplay iteration. Defaults to 3000.
 52 | 
 53 | #### beforeSlide
 54 | `React.PropTypes.func`
 55 | 
 56 | Hook to be called before a slide is changed.
 57 | 
 58 | #### cellAlign
 59 | `React.PropTypes.oneOf(['left', 'center', 'right'])`
 60 | 
 61 | When displaying more than one slide, sets which position to anchor the current slide to.
 62 | 
 63 | #### cellSpacing
 64 | `React.PropTypes.number`
 65 | 
 66 | Space between slides, as an integer, but reflected as `px`
 67 | 
 68 | #### data
 69 | `React.PropTypes.func`
 70 | 
 71 | Used with the ControllerMixin to add carousel data to parent state.
 72 | 
 73 | #### decorators
 74 | `React.PropTypes.array`
 75 | 
 76 | An array of objects that supply internal carousel controls.
 77 | Decorator objects have `component`, `position` & `style` properties. `component` takes a React component, `position` takes a predefined position string and `style` takes an object of styles to be applied to the decorator. See an example below:
 78 | 
 79 | ```javascript
 80 | var Decorators = [{
 81 |   component: React.createClass({
 82 |     render() {
 83 |       return (
 84 |         <button
 85 |           onClick={this.props.previousSlide}>
 86 |           Previous Slide
 87 |         </button>
 88 |       )
 89 |     }
 90 |   }),
 91 |   position: 'CenterLeft',
 92 |   style: {
 93 |     padding: 20
 94 |   }
 95 | }];
 96 | 
 97 | // Valid position properties are TopLeft, TopCenter, TopRight
 98 | // CenterLeft, CenterCenter, CenterRight, BottomLeft, BottomCenter
 99 | // and BottomRight
100 | ```
101 | 
102 | #### dragging
103 | `React.PropTypes.bool`
104 | 
105 | Enable mouse swipe/dragging
106 | 
107 | #### easing
108 | `React.PropTypes.Function`
109 | 
110 | Animation easing function. Default is `easeOutCirc`. See valid easings here: [https://github.com/chenglou/tween-functions](https://github.com/chenglou/tween-functions)
111 | 
112 | #### framePadding
113 | `React.PropTypes.string`
114 | 
115 | Used to set the margin of the slider frame. Accepts any string dimension value such as `"0px 20px"` or `"500px"`.
116 | 
117 | #### frameOverflow
118 | `React.PropTypes.string`
119 | 
120 | Used to set overflow style property on slider frame. Defaults to `hidden`.
121 | 
122 | #### edgeEasing
123 | `React.PropTypes.Function`
124 | 
125 | Animation easing function when swipe exceeds edge. Default is `linear`. See valid easings here: [https://github.com/chenglou/tween-functions](https://github.com/chenglou/tween-functions)
126 | 
127 | #### initialSlideHeight
128 | `React.PropTypes.number`
129 | 
130 | Initial height of the slides in pixels.
131 | 
132 | #### initialSlideWidth
133 | `React.PropTypes.number`
134 | 
135 | Initial width of the slides in pixels.
136 | 
137 | #### slideIndex
138 | `React.PropTypes.number`
139 | 
140 | Manually set the index of the slide to be shown.
141 | 
142 | #### slidesToShow
143 | `React.PropTypes.number`
144 | 
145 | Slides to show at once.
146 | 
147 | #### slidesToScroll
148 | ```
149 | slidesToScroll: React.PropTypes.oneOfType([
150 |   React.PropTypes.number,
151 |   React.PropTypes.oneOf(['auto'])
152 | ])
153 | ```
154 | 
155 | Slides to scroll at once. Set to `"auto"` to always scroll the current number of visible slides.
156 | 
157 | #### slideWidth
158 | 
159 | `React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number])`
160 | 
161 | Manually set slideWidth. If you want hard pixel widths, use a string like `slideWidth="20px"`, and if you prefer a percentage of the container, use a decimal integer like `slideWidth={0.8}`
162 | 
163 | #### speed
164 | `React.PropTypes.number`
165 | 
166 | Animation duration.
167 | 
168 | #### swiping
169 | `React.PropTypes.bool`
170 | 
171 | Enable touch swipe/dragging
172 | 
173 | #### vertical
174 | `React.PropTypes.bool`
175 | 
176 | Enable the slides to transition vertically.
177 | 
178 | #### width
179 | `React.PropTypes.string`
180 | 
181 | Used to hardcode the slider width. Accepts any string dimension value such as `"80%"` or `"500px"`.
182 | 
183 | #### wrapAround
184 | `React.PropTypes.bool`
185 | 
186 | Sets infinite wrapAround mode. Defaults to `false`
187 | 
188 | ### ControllerMixin
189 | 
190 | The ControllerMixin provides a way to add external controllers for a carousel. To use the controller mixin, add it to your parent component as shown below:
191 | 
192 | ```javascript
193 | const App = React.createClass({
194 |   mixins: [Carousel.ControllerMixin],
195 |   render() {
196 |     return (
197 |       <Carousel ref="carousel" data={this.setCarouselData.bind(this, 'carousel')}>
198 |         ...
199 |       </Carousel>
200 |     )
201 |   }
202 | });
203 | ```
204 | 
205 | It is required to give your component a ref value, and to pass the setCarouselData method to the data prop with the same ref as an argument.
206 | 
207 | After setting this up, your parent component has a carousels object in it's state. You can now control your carousels from other child components:
208 | 
209 | ```javascript
210 | const App = React.createClass({
211 |   mixins: [Carousel.ControllerMixin],
212 |   render() {
213 |     return (
214 |       <Carousel ref="carousel" data={this.setCarouselData.bind(this, 'carousel')}>
215 |         ...
216 |       </Carousel>
217 |       {this.state.carousels.carousel ? <button type="button" onClick={this.state.carousels.carousel.goToSlide.bind(null,4)}>
218 |         Go to slide 5
219 |       </button> : null}
220 |     )
221 |   }
222 | });
223 | 
224 | ```
225 | 


--------------------------------------------------------------------------------
/tests/specs/carousel.spec.tsx:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | import React from 'react';
  4 | import ReactDOM from 'react-dom';
  5 | import TestUtils from 'react-dom/test-utils';
  6 | import Carousel from '../../src/Carousel';
  7 | import expect from 'expect.js';
  8 | 
  9 | describe('Carousel', function () {
 10 | 
 11 |   var container, component;
 12 | 
 13 |   function setup() {
 14 |     // Carousel = require('Carousel');
 15 |     container = document.createElement('DIV');
 16 |     document.body.appendChild(container);
 17 |   }
 18 |   function teardown() {
 19 |     ReactDOM.unmountComponentAtNode(container);
 20 |     document.body.removeChild(container);
 21 |     container = null;
 22 |   }
 23 | 
 24 |   describe('Build', function() {
 25 | 
 26 |     beforeEach(function() {
 27 |       setup();
 28 |     });
 29 | 
 30 |     afterEach(function() {
 31 |       teardown();
 32 |     });
 33 | 
 34 |     it('should render a .slider div', function() {
 35 |       component = ReactDOM.render(
 36 |         <Carousel>
 37 |           <p>Slide 1</p>
 38 |           <p>Slide 2</p>
 39 |           <p>Slide 3</p>
 40 |         </Carousel>,
 41 |         container
 42 |       );
 43 |       var list = TestUtils.scryRenderedDOMComponentsWithClass(
 44 |         component,
 45 |         'slider'
 46 |       );
 47 |       expect(list.length).to.equal(1);
 48 |     });
 49 | 
 50 |     it('should render a .slider-frame div', function() {
 51 |       component = ReactDOM.render(
 52 |         <Carousel>
 53 |           <p>Slide 1</p>
 54 |           <p>Slide 2</p>
 55 |           <p>Slide 3</p>
 56 |         </Carousel>,
 57 |         container
 58 |       );
 59 |       var list = TestUtils.scryRenderedDOMComponentsWithClass(
 60 |         component,
 61 |         'slider-frame'
 62 |       );
 63 |       expect(list.length).to.equal(1);
 64 |     });
 65 | 
 66 |     it('should render a .slider-list ul', function() {
 67 |       component = ReactDOM.render(
 68 |         <Carousel>
 69 |           <p>Slide 1</p>
 70 |           <p>Slide 2</p>
 71 |           <p>Slide 3</p>
 72 |         </Carousel>,
 73 |         container
 74 |       );
 75 |       var list = TestUtils.scryRenderedDOMComponentsWithClass(
 76 |         component,
 77 |         'slider-list'
 78 |       );
 79 |       expect(list.length).to.equal(1);
 80 |     });
 81 | 
 82 |     it('should render children with a .slider-slide class', function() {
 83 |       component = ReactDOM.render(
 84 |         <Carousel>
 85 |           <p>Slide 1</p>
 86 |           <p>Slide 2</p>
 87 |           <p>Slide 3</p>
 88 |         </Carousel>,
 89 |         container
 90 |       );
 91 |       var list = TestUtils.scryRenderedDOMComponentsWithClass(
 92 |         component,
 93 |         'slider-slide'
 94 |       );
 95 |       expect(list.length).to.equal(3);
 96 |     });
 97 | 
 98 |     it('should render decorators by default', function() {
 99 |         component = ReactDOM.render(
100 |           <Carousel>
101 |             <p>Slide 1</p>
102 |             <p>Slide 2</p>
103 |             <p>Slide 3</p>
104 |           </Carousel>,
105 |           container
106 |         );
107 |         var decorator1 = TestUtils.scryRenderedDOMComponentsWithClass(
108 |           component,
109 |           'slider-decorator-0'
110 |         );
111 |         var decorator2 = TestUtils.scryRenderedDOMComponentsWithClass(
112 |           component,
113 |           'slider-decorator-1'
114 |         );
115 |         var decorator3 = TestUtils.scryRenderedDOMComponentsWithClass(
116 |           component,
117 |           'slider-decorator-2'
118 |         );
119 |         expect(decorator1.length).to.equal(1);
120 |         expect(decorator2.length).to.equal(1);
121 |         expect(decorator3.length).to.equal(1);
122 |     });
123 | 
124 |   });
125 | 
126 |   describe('Props', function() {
127 | 
128 |     beforeEach(function() {
129 |       setup();
130 |     });
131 | 
132 |     afterEach(function() {
133 |       teardown();
134 |     });
135 | 
136 |     it('should render with class "slider" with no props supplied', function() {
137 |         component = ReactDOM.render(
138 |           <Carousel>
139 |             <p>Slide 1</p>
140 |             <p>Slide 2</p>
141 |             <p>Slide 3</p>
142 |           </Carousel>,
143 |           container
144 |         );
145 |         var slider = TestUtils.scryRenderedDOMComponentsWithClass(
146 |           component,
147 |           'slider'
148 |         );
149 |         expect(slider.length).to.equal(1);
150 |     });
151 | 
152 |     it('should render with class "test" with className supplied', function() {
153 |         component = ReactDOM.render(
154 |           <Carousel className="test">
155 |             <p>Slide 1</p>
156 |             <p>Slide 2</p>
157 |             <p>Slide 3</p>
158 |           </Carousel>,
159 |           container
160 |         );
161 |         var slider = TestUtils.scryRenderedDOMComponentsWithClass(
162 |           component,
163 |           'test'
164 |         );
165 |         expect(slider.length).to.equal(1);
166 |     });
167 | 
168 |     it('should merge provided styles with the defaults', function() {
169 |         component = ReactDOM.render(
170 |           <Carousel style={{backgroundColor: 'black'}}>
171 |             <p>Slide 1</p>
172 |             <p>Slide 2</p>
173 |             <p>Slide 3</p>
174 |           </Carousel>,
175 |           container
176 |         );
177 |         var slider: any = TestUtils.findRenderedDOMComponentWithClass(
178 |           component,
179 |           'slider'
180 |         );
181 |         expect(slider.style.backgroundColor).to.equal('black');
182 |         expect(slider.style.display).to.equal('block');
183 |     });
184 | 
185 |     it('should align to 0 if cellAlign is left', function() {
186 |         component = ReactDOM.render(
187 |           <Carousel slidesToShow={3} cellAlign="left" width="500px">
188 |             <p>Slide 1</p>
189 |             <p>Slide 2</p>
190 |             <p>Slide 3</p>
191 |           </Carousel>,
192 |           container
193 |         );
194 |         var slider: any = TestUtils.findRenderedDOMComponentWithClass(
195 |           component,
196 |           'slider-list'
197 |         );
198 |         expect(slider.style.transform).to.equal('translate3d(0px, 0px, 0)');
199 |     });
200 | 
201 |     it('should align to 200 if cellAlign is center', function() {
202 |         component = ReactDOM.render(
203 |           <Carousel slidesToShow={3} cellAlign="center" width="600px">
204 |             <p>Slide 1</p>
205 |             <p>Slide 2</p>
206 |             <p>Slide 3</p>
207 |           </Carousel>,
208 |           container
209 |         );
210 | 
211 |         var slider: any = TestUtils.findRenderedDOMComponentWithClass(
212 |         component,
213 |           'slider-list'
214 |         );
215 |         expect(slider.style.transform).to.equal('translate3d(200px, 0px, 0)');
216 |     });
217 | 
218 |     it('should align to 400 if cellAlign is right', function() {
219 |         component = ReactDOM.render(
220 |           <Carousel slidesToShow={3} cellAlign="right" width="600px">
221 |             <p>Slide 1</p>
222 |             <p>Slide 2</p>
223 |             <p>Slide 3</p>
224 |           </Carousel>,
225 |           container
226 |         );
227 | 
228 |         var slider: any = TestUtils.findRenderedDOMComponentWithClass(
229 |         component,
230 |           'slider-list'
231 |         );
232 |         expect(slider.style.transform).to.equal('translate3d(400px, 0px, 0)');
233 |     });
234 | 
235 |     it('should set slide width to 200 if cellSpacing is not provided', function() {
236 |         component = ReactDOM.render(
237 |           <Carousel slidesToShow={3} width="600px">
238 |             <p>Slide 1</p>
239 |             <p>Slide 2</p>
240 |             <p>Slide 3</p>
241 |           </Carousel>,
242 |           container
243 |         );
244 | 
245 |         var slider: any[] = TestUtils.scryRenderedDOMComponentsWithClass(
246 |         component,
247 |           'slider-slide'
248 |         );
249 |         expect(slider[0].style.width).to.equal('200px');
250 |     });
251 | 
252 |     it('should set slide width to 180 if cellSpacing is set to 30', function() {
253 |         component = ReactDOM.render(
254 |           <Carousel slidesToShow={3} cellSpacing={30} width="600px">
255 |             <p>Slide 1</p>
256 |             <p>Slide 2</p>
257 |             <p>Slide 3</p>
258 |           </Carousel>,
259 |           container
260 |         );
261 | 
262 |         var slider: any[] = TestUtils.scryRenderedDOMComponentsWithClass(
263 |         component,
264 |           'slider-slide'
265 |         );
266 |         expect(slider[0].style.width).to.equal('180px');
267 |     });
268 | 
269 |     it('should not add mouse handlers if dragging is false', function() {
270 |         component = ReactDOM.render(
271 |           <Carousel dragging={false}>
272 |             <p>Slide 1</p>
273 |             <p>Slide 2</p>
274 |             <p>Slide 3</p>
275 |           </Carousel>,
276 |           container
277 |         );
278 | 
279 |         var frame: any = TestUtils.findRenderedDOMComponentWithClass(
280 |         component,
281 |           'slider-frame'
282 |         );
283 |         expect(frame.onMouseDown).to.be.undefined;
284 |     });
285 | 
286 |     it('should add mouse handlers if dragging is true', function() {
287 |         component = ReactDOM.render(
288 |           <Carousel dragging={true}>
289 |             <p>Slide 1</p>
290 |             <p>Slide 2</p>
291 |             <p>Slide 3</p>
292 |           </Carousel>,
293 |           container
294 |         );
295 | 
296 |         var frame: any = TestUtils.findRenderedDOMComponentWithClass(
297 |         component,
298 |           'slider-frame'
299 |         );
300 |         expect(frame.onMouseDown).to.be.defined;
301 |     });
302 | 
303 |     it('should add frame margin if framePadding is supplied a value', function() {
304 |         component = ReactDOM.render(
305 |           <Carousel framePadding="40px">
306 |             <p>Slide 1</p>
307 |             <p>Slide 2</p>
308 |             <p>Slide 3</p>
309 |           </Carousel>,
310 |           container
311 |         );
312 | 
313 |         var frame: any = TestUtils.findRenderedDOMComponentWithClass(
314 |         component,
315 |           'slider-frame'
316 |         );
317 |         expect(frame.style.margin).to.equal('40px');
318 |     });
319 | 
320 |     it('should set slideWidth to 1000 if slidesToShow is 1', function() {
321 |         component = ReactDOM.render(
322 |           <Carousel slidesToShow={1} width="1000px">
323 |             <p className="test-slide">Slide 1</p>
324 |             <p>Slide 2</p>
325 |             <p>Slide 3</p>
326 |           </Carousel>,
327 |           container
328 |         );
329 | 
330 |         var slide: any[] = TestUtils.scryRenderedDOMComponentsWithClass(
331 |         component,
332 |           'slider-slide'
333 |         );
334 | 
335 |         expect(slide[0].style.width).to.equal('1000px');
336 |     });
337 | 
338 |     it('should set slideWidth to 200 if slidesToShow is 3', function() {
339 |         component = ReactDOM.render(
340 |           <Carousel slidesToShow={3} width="600px">
341 |             <p className="test-slide">Slide 1</p>
342 |             <p>Slide 2</p>
343 |             <p>Slide 3</p>
344 |           </Carousel>,
345 |           container
346 |         );
347 | 
348 |         var slide: any[] = TestUtils.scryRenderedDOMComponentsWithClass(
349 |         component,
350 |           'slider-slide'
351 |         );
352 | 
353 |         expect(slide[0].style.width).to.equal('200px');
354 |     });
355 | 
356 |     it('should have currentSlide equal 2 for 4 slides if slidesToShow is 2, slidesToScroll is 2, and it advances', function() {
357 |         component = ReactDOM.render(
358 |           <Carousel slidesToShow={2} slidesToScroll={2}>
359 |             <p>Slide 1</p>
360 |             <p>Slide 2</p>
361 |             <p>Slide 3</p>
362 |             <p>Slide 4</p>
363 |           </Carousel>,
364 |           container
365 |         );
366 | 
367 |         component.nextSlide();
368 | 
369 |         expect(component.state.currentSlide).to.equal(2);
370 |     });
371 | 
372 |     it('should have currentSlide equal 1 for 3 slides if slidesToShow is 2, slidesToScroll is 2, and it advances', function() {
373 |         component = ReactDOM.render(
374 |           <Carousel slidesToShow={2} slidesToScroll={2}>
375 |             <p>Slide 1</p>
376 |             <p>Slide 2</p>
377 |             <p>Slide 3</p>
378 |           </Carousel>,
379 |           container
380 |         );
381 | 
382 |         component.nextSlide();
383 | 
384 |         expect(component.state.currentSlide).to.equal(1);
385 |     });
386 | 
387 |     it('should set slidesToScroll to passed in slidesToScroll', function() {
388 |         component = ReactDOM.render(
389 |           <Carousel width="600px" slidesToScroll={3}>
390 |             <p className="test-slider">Slide 1</p>
391 |             <p>Slide 2</p>
392 |             <p>Slide 3</p>
393 |           </Carousel>,
394 |           container
395 |         );
396 | 
397 |         expect(component.state.slidesToScroll).to.equal(3);
398 |     });
399 | 
400 |     it('should set slidesToScroll to 2 if slideWidth is 250px and slidesToScroll is auto',
401 |       function() {
402 |         component = ReactDOM.render(
403 |           <Carousel slideWidth="250px" width="600px" slidesToScroll="auto">
404 |             <p className="test-slide">Slide 1</p>
405 |             <p>Slide 2</p>
406 |             <p>Slide 3</p>
407 |           </Carousel>,
408 |           container
409 |         );
410 | 
411 |         expect(component.state.slidesToScroll).to.equal(2);
412 |     });
413 | 
414 |     it('should set slidesToScroll to 3 with slideWidth: 100px, cellSpacing: 100, slidesToScroll:auto',
415 |       function() {
416 |         component = ReactDOM.render(
417 |           <Carousel slideWidth="100px" width="600px" slidesToScroll="auto" cellSpacing={100}>
418 |             <p className="test-slide">Slide 1</p>
419 |             <p>Slide 2</p>
420 |             <p>Slide 3</p>
421 |           </Carousel>,
422 |           container
423 |         );
424 | 
425 |         expect(component.state.slidesToScroll).to.equal(3);
426 |     });
427 | 
428 |     it('should set slidesToScroll to 6 if slideWidth is 100px and slidesToScroll is auto',
429 |       function() {
430 |         component = ReactDOM.render(
431 |           <Carousel slideWidth="100px" width="600px" slidesToScroll="auto">
432 |             <p className="test-slide">Slide 1</p>
433 |             <p>Slide 2</p>
434 |             <p>Slide 3</p>
435 |           </Carousel>,
436 |           container
437 |         );
438 | 
439 |         expect(component.state.slidesToScroll).to.equal(6);
440 |     });
441 |   });
442 | 
443 |   describe('Methods', function() {
444 | 
445 |     beforeEach(function() {
446 |       setup();
447 |     });
448 | 
449 |     afterEach(function() {
450 |       teardown();
451 |     });
452 | 
453 |     it('should advance if nextSlide() is called', function() {
454 |         component = ReactDOM.render(
455 |           <Carousel>
456 |             <p>Slide 1</p>
457 |             <p>Slide 2</p>
458 |             <p>Slide 3</p>
459 |           </Carousel>,
460 |           container
461 |         );
462 | 
463 |         component.nextSlide();
464 | 
465 |         expect(component.state.currentSlide).to.equal(1);
466 |     });
467 | 
468 |     it('should not advance if nextSlide() is called and the currentSlide is the last slide', function() {
469 |         component = ReactDOM.render(
470 |           <Carousel>
471 |             <p>Slide 1</p>
472 |             <p>Slide 2</p>
473 |             <p>Slide 3</p>
474 |           </Carousel>,
475 |           container
476 |         );
477 | 
478 |         component.nextSlide();
479 |         component.nextSlide();
480 |         component.nextSlide();
481 | 
482 |         expect(component.state.currentSlide).to.equal(2);
483 |     });
484 | 
485 |     it('should not go back if previousSlide() is called and the currentSlide is the first slide', function() {
486 |         component = ReactDOM.render(
487 |           <Carousel>
488 |             <p>Slide 1</p>
489 |             <p>Slide 2</p>
490 |             <p>Slide 3</p>
491 |           </Carousel>,
492 |           container
493 |         );
494 | 
495 |         component.previousSlide();
496 | 
497 |         expect(component.state.currentSlide).to.equal(0);
498 |     });
499 | 
500 |     it('should go back if previousSlide() is called', function() {
501 |         component = ReactDOM.render(
502 |           <Carousel>
503 |             <p>Slide 1</p>
504 |             <p>Slide 2</p>
505 |             <p>Slide 3</p>
506 |           </Carousel>,
507 |           container
508 |         );
509 | 
510 |         component.nextSlide();
511 |         component.previousSlide();
512 | 
513 |         expect(component.state.currentSlide).to.equal(0);
514 |     });
515 | 
516 |     it('should go to 2 if goToSlide(2) is called', function() {
517 |         component = ReactDOM.render(
518 |           <Carousel>
519 |             <p>Slide 1</p>
520 |             <p>Slide 2</p>
521 |             <p>Slide 3</p>
522 |           </Carousel>,
523 |           container
524 |         );
525 | 
526 |         component.goToSlide(2);
527 | 
528 |         expect(component.state.currentSlide).to.equal(2);
529 |     });
530 | 
531 |   });
532 | 
533 | });
534 | 


--------------------------------------------------------------------------------
/src/carousel.tsx:
--------------------------------------------------------------------------------
   1 | 'use strict';
   2 | 
   3 | import React from 'react';
   4 | import decorators from './decorators';
   5 | import ExecutionEnvironment from 'exenv';
   6 | import requestAnimationFrame from 'raf';
   7 | 
   8 | // from https://github.com/chenglou/tween-functions
   9 | function easeOutCirc(t, b, _c, d) {
  10 |   var c = _c - b;
  11 |   return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
  12 | }
  13 | function linear(t, b, _c, d) {
  14 |   var c = _c - b;
  15 |   return c * t / d + b;
  16 | }
  17 | 
  18 | const DEFAULT_STACK_BEHAVIOR = 'ADDITIVE';
  19 | const DEFAULT_DURATION = 300;
  20 | const DEFAULT_DELAY = 0;
  21 | 
  22 | const stackBehavior = {
  23 |   ADDITIVE: 'ADDITIVE',
  24 |   DESTRUCTIVE: 'DESTRUCTIVE',
  25 | };
  26 | 
  27 | const addEvent = (elem, type, eventHandle) => {
  28 |   if (elem === null || typeof (elem) === 'undefined') {
  29 |     return;
  30 |   }
  31 |   if (elem.addEventListener) {
  32 |     elem.addEventListener(type, eventHandle, false);
  33 |   } else if (elem.attachEvent) {
  34 |     elem.attachEvent('on' + type, eventHandle);
  35 |   } else {
  36 |     elem['on' + type] = eventHandle;
  37 |   }
  38 | };
  39 | 
  40 | const removeEvent = (elem, type, eventHandle) => {
  41 |   if (elem === null || typeof (elem) === 'undefined') {
  42 |     return;
  43 |   }
  44 |   if (elem.removeEventListener) {
  45 |     elem.removeEventListener(type, eventHandle, false);
  46 |   } else if (elem.detachEvent) {
  47 |     elem.detachEvent('on' + type, eventHandle);
  48 |   } else {
  49 |     elem['on' + type] = null;
  50 |   }
  51 | };
  52 | 
  53 | export type IDecoratorPosition = 'TopLeft' | 'TopCenter' | 'TopRight' | 'CenterLeft' | 'CenterCenter' |
  54 |   'CenterRight' | 'BottomLeft' | 'BottomCenter' | 'BottomRight';
  55 | 
  56 | export interface ICarouselProps {
  57 |   className?: string;
  58 |   style?: any;
  59 |   afterSlide?: (index: number) => void;
  60 |   autoplay?: boolean;
  61 |   resetAutoplay?: boolean;
  62 |   swipeSpeed?: number;
  63 |   autoplayInterval?: number;
  64 |   beforeSlide?: (currentIndex: number, endIndex: number) => void;
  65 |   cellAlign?: 'left' | 'center' | 'right';
  66 |   cellSpacing?: number;
  67 |   data?: () => void;
  68 |   decorators?: any[];
  69 |   dragging?: boolean;
  70 |   easing?: Function;
  71 |   edgeEasing?: Function;
  72 |   framePadding?: string;
  73 |   frameOverflow?: string;
  74 |   initialSlideHeight?: number;
  75 |   initialSlideWidth?: number;
  76 |   slideIndex?: number;
  77 |   slidesToShow?: number;
  78 |   slidesToScroll?: number | 'auto';
  79 |   slideWidth?: string | number;
  80 |   speed?: number;
  81 |   swiping?: boolean;
  82 |   vertical?: boolean;
  83 |   width?: string;
  84 |   wrapAround?: boolean;
  85 | }
  86 | 
  87 | class Carousel extends React.Component<ICarouselProps, any> {
  88 |   static defaultProps = {
  89 |     afterSlide: () => {},
  90 |     autoplay: false,
  91 |     resetAutoplay: true,
  92 |     swipeSpeed: 12,
  93 |     autoplayInterval: 3000,
  94 |     beforeSlide: () => {},
  95 |     cellAlign: 'left',
  96 |     cellSpacing: 0,
  97 |     data: () => {},
  98 |     decorators,
  99 |     dragging: true,
 100 |     easing: easeOutCirc,
 101 |     edgeEasing: linear,
 102 |     framePadding: '0px',
 103 |     frameOverflow: 'hidden',
 104 |     slideIndex: 0,
 105 |     slidesToScroll: 1,
 106 |     slidesToShow: 1,
 107 |     slideWidth: 1,
 108 |     speed: 500,
 109 |     swiping: true,
 110 |     vertical: false,
 111 |     width: '100%',
 112 |     wrapAround: false,
 113 |     style: {},
 114 |   } as ICarouselProps;
 115 | 
 116 |   touchObject: any;
 117 |   autoplayPaused: any;
 118 |   clickSafe: boolean;
 119 |   autoplayID: any;
 120 |   _rafID: any;
 121 | 
 122 |   constructor(props) {
 123 |     super(props);
 124 | 
 125 |     this.state = {
 126 |       currentSlide: this.props.slideIndex,
 127 |       dragging: false,
 128 |       frameWidth: 0,
 129 |       left: 0,
 130 |       slideCount: 0,
 131 |       slidesToScroll: this.props.slidesToScroll,
 132 |       slideWidth: 0,
 133 |       top: 0,
 134 |       tweenQueue: [],
 135 |     };
 136 |     this.touchObject = {};
 137 |     this.clickSafe = true;
 138 |   }
 139 | 
 140 |   componentWillMount() {
 141 |     this.setInitialDimensions();
 142 |   }
 143 | 
 144 |   componentDidMount() {
 145 |     this.setDimensions();
 146 |     this.bindEvents();
 147 |     this.setExternalData();
 148 |     if (this.props.autoplay) {
 149 |       this.startAutoplay();
 150 |     }
 151 |   }
 152 | 
 153 |   componentWillReceiveProps(nextProps) {
 154 |     this.setState({
 155 |       slideCount: nextProps.children.length,
 156 |     });
 157 |     this.setDimensions(nextProps);
 158 |     if (this.props.slideIndex !== nextProps.slideIndex && nextProps.slideIndex !== this.state.currentSlide) {
 159 |       this.goToSlide(nextProps.slideIndex);
 160 |     }
 161 |     if (this.props.autoplay !== nextProps.autoplay) {
 162 |       if (nextProps.autoplay) {
 163 |         this.startAutoplay();
 164 |       } else {
 165 |         this.stopAutoplay();
 166 |       }
 167 |     }
 168 |   }
 169 | 
 170 |   componentWillUnmount() {
 171 |     this.unbindEvents();
 172 |     this.stopAutoplay();
 173 |     requestAnimationFrame.cancel(this._rafID);
 174 |     this._rafID = -1;
 175 |   }
 176 | 
 177 |   // react-tween-state
 178 |   tweenState (path, { easing, duration, delay, beginValue, endValue, onEnd, stackBehavior: configSB }) {
 179 |     this.setState((state: any) => {
 180 |       let cursor = state;
 181 |       let stateName;
 182 |       // see comment below on pash hash
 183 |       let pathHash;
 184 |       if (typeof path === 'string') {
 185 |         stateName = path;
 186 |         pathHash = path;
 187 |       } else {
 188 |         for (let i = 0; i < path.length - 1; i++) {
 189 |           cursor = cursor[path[i]];
 190 |         }
 191 |         stateName = path[path.length - 1];
 192 |         pathHash = path.join('|');
 193 |       }
 194 |       // see the reasoning for these defaults at the top of file
 195 |       const newConfig = {
 196 |         easing,
 197 |         duration: duration == null ? DEFAULT_DURATION : duration,
 198 |         delay: delay == null ? DEFAULT_DELAY : delay,
 199 |         beginValue: beginValue == null ? cursor[stateName] : beginValue,
 200 |         endValue,
 201 |         onEnd,
 202 |         stackBehavior: configSB || DEFAULT_STACK_BEHAVIOR,
 203 |       };
 204 | 
 205 |       let newTweenQueue = state.tweenQueue;
 206 |       if (newConfig.stackBehavior === stackBehavior.DESTRUCTIVE) {
 207 |         newTweenQueue = state.tweenQueue.filter(item => item.pathHash !== pathHash);
 208 |       }
 209 | 
 210 |       // we store path hash, so that during value retrieval we can use hash
 211 |       // comparison to find the path. See the kind of shitty thing you have to
 212 |       // do when you don't have value comparison for collections?
 213 |       newTweenQueue.push({
 214 |         pathHash,
 215 |         config: newConfig,
 216 |         initTime: Date.now() + newConfig.delay,
 217 |       });
 218 | 
 219 |       // sorry for mutating. For perf reasons we don't want to deep clone.
 220 |       // guys, can we please all start using persistent collections so that
 221 |       // we can stop worrying about nonesense like this
 222 |       cursor[stateName] = newConfig.endValue;
 223 |       if (newTweenQueue.length === 1) {
 224 |         this._rafID = requestAnimationFrame(this._rafCb);
 225 |       }
 226 | 
 227 |       // this will also include the above mutated update
 228 |       return { tweenQueue: newTweenQueue };
 229 |     });
 230 |   }
 231 | 
 232 |   getTweeningValue(path) {
 233 |     const state: any = this.state;
 234 | 
 235 |     let tweeningValue;
 236 |     let pathHash;
 237 |     if (typeof path === 'string') {
 238 |       tweeningValue = state[path];
 239 |       pathHash = path;
 240 |     } else {
 241 |       tweeningValue = state;
 242 |       for (let i = 0; i < path.length; i++) {
 243 |         tweeningValue = tweeningValue[path[i]];
 244 |       }
 245 |       pathHash = path.join('|');
 246 |     }
 247 |     let now = Date.now();
 248 | 
 249 |     for (let i = 0; i < state.tweenQueue.length; i++) {
 250 |       const { pathHash: itemPathHash, initTime, config } = state.tweenQueue[i];
 251 |       if (itemPathHash !== pathHash) {
 252 |         continue;
 253 |       }
 254 | 
 255 |       const progressTime = now - initTime > config.duration
 256 |         ? config.duration
 257 |         : Math.max(0, now - initTime);
 258 |       // `now - initTime` can be negative if initTime is scheduled in the
 259 |       // future by a delay. In this case we take 0
 260 | 
 261 |       // if duration is 0, consider that as jumping to endValue directly. This
 262 |       // is needed because the easing functino might have undefined behavior for
 263 |       // duration = 0
 264 |       const easeValue = config.duration === 0 ? config.endValue : config.easing(
 265 |         progressTime,
 266 |         config.beginValue,
 267 |         config.endValue,
 268 |         config.duration,
 269 |         // TODO: some funcs accept a 5th param
 270 |       );
 271 |       const contrib = easeValue - config.endValue;
 272 |       tweeningValue += contrib;
 273 |     }
 274 | 
 275 |     return tweeningValue;
 276 |   }
 277 | 
 278 |   _rafCb = () => {
 279 |     const state: any = this.state;
 280 |     if (state.tweenQueue.length === 0) {
 281 |       return;
 282 |     }
 283 | 
 284 |     const now = Date.now();
 285 |     let newTweenQueue: Array<{}> = [];
 286 | 
 287 |     for (let i = 0; i < state.tweenQueue.length; i++) {
 288 |       const item = state.tweenQueue[i];
 289 |       const { initTime, config } = item;
 290 |       if (now - initTime < config.duration) {
 291 |         newTweenQueue.push(item);
 292 |       } else {
 293 |         if (config.onEnd) {
 294 |           config.onEnd();
 295 |         }
 296 |       }
 297 |     }
 298 | 
 299 |     // onEnd might trigger a parent callback that removes this component
 300 |     // -1 means we've canceled it in componentWillUnmount
 301 |     if (this._rafID === -1) {
 302 |       return;
 303 |     }
 304 | 
 305 |     this.setState({
 306 |       tweenQueue: newTweenQueue,
 307 |     });
 308 | 
 309 |     this._rafID = requestAnimationFrame(this._rafCb);
 310 |   }
 311 | 
 312 |   render() {
 313 |     const children = React.Children.count(this.props.children) > 1 ? this.formatChildren(
 314 |       this.props.children,
 315 |     ) : this.props.children;
 316 | 
 317 |     return (
 318 |       <div
 319 |         className={['slider', this.props.className || ''].join(' ')}
 320 |         ref="slider"
 321 |         style={{ ...this.getSliderStyles(), ...this.props.style }}
 322 |       >
 323 |         <div className="slider-frame"
 324 |           ref="frame"
 325 |           style={this.getFrameStyles()}
 326 |           {...this.getTouchEvents()}
 327 |           {...this.getMouseEvents()}
 328 |           onClick={this.handleClick}
 329 |         >
 330 |           <ul className="slider-list" ref="list" style={this.getListStyles()}>
 331 |             {children}
 332 |           </ul>
 333 |         </div>
 334 |         {this.props.decorators ?
 335 |           this.props.decorators.map((Decorator, index) => (
 336 |             <div
 337 |               style={{...this.getDecoratorStyles(Decorator.position), ...(Decorator.style || {})}}
 338 |               className={'slider-decorator-' + index}
 339 |               key={index}>
 340 |               <Decorator.component
 341 |                 currentSlide={this.state.currentSlide}
 342 |                 slideCount={this.state.slideCount}
 343 |                 frameWidth={this.state.frameWidth}
 344 |                 slideWidth={this.state.slideWidth}
 345 |                 slidesToScroll={this.state.slidesToScroll}
 346 |                 cellSpacing={this.props.cellSpacing}
 347 |                 slidesToShow={this.props.slidesToShow}
 348 |                 wrapAround={this.props.wrapAround}
 349 |                 nextSlide={this.nextSlide}
 350 |                 previousSlide={this.previousSlide}
 351 |                 goToSlide={this.goToSlide} />
 352 |             </div>
 353 |           )) : null}
 354 |         <style type="text/css" dangerouslySetInnerHTML={{__html: this.getStyleTagStyles()}}/>
 355 |       </div>
 356 |     );
 357 |   }
 358 | 
 359 |   // Touch Events
 360 |   getTouchEvents() {
 361 |     let self = this;
 362 |     if (this.props.swiping === false) {
 363 |       return null;
 364 |     }
 365 | 
 366 |     return {
 367 |       onTouchStart(e) {
 368 |         self.touchObject = {
 369 |           startX: e.touches[0].pageX,
 370 |           startY: e.touches[0].pageY,
 371 |         };
 372 |         self.handleMouseOver();
 373 |       },
 374 |       onTouchMove(e) {
 375 |         const direction = self.swipeDirection(
 376 |           self.touchObject.startX,
 377 |           e.touches[0].pageX,
 378 |           self.touchObject.startY,
 379 |           e.touches[0].pageY,
 380 |         );
 381 | 
 382 |         if (direction !== 0) {
 383 |           e.preventDefault();
 384 |         }
 385 | 
 386 |         const length = self.props.vertical ? Math.round(
 387 |           Math.sqrt(Math.pow(e.touches[0].pageY - self.touchObject.startY, 2)),
 388 |         ) : Math.round(
 389 |           Math.sqrt(Math.pow(e.touches[0].pageX - self.touchObject.startX, 2)),
 390 |         );
 391 | 
 392 |         self.touchObject = {
 393 |           startX: self.touchObject.startX,
 394 |           startY: self.touchObject.startY,
 395 |           endX: e.touches[0].pageX,
 396 |           endY: e.touches[0].pageY,
 397 |           length,
 398 |           direction,
 399 |         };
 400 | 
 401 |         self.setState({
 402 |           left: self.props.vertical ? 0 : self.getTargetLeft(self.touchObject.length * self.touchObject.direction),
 403 |           top: self.props.vertical ? self.getTargetLeft(self.touchObject.length * self.touchObject.direction) : 0,
 404 |         });
 405 |       },
 406 |       onTouchEnd(e) {
 407 |         self.handleSwipe(e);
 408 |         self.handleMouseOut();
 409 |       },
 410 |       onTouchCancel(e) {
 411 |         self.handleSwipe(e);
 412 |       },
 413 |     };
 414 |   }
 415 | 
 416 |   getMouseEvents() {
 417 |     let self = this;
 418 |     if (this.props.dragging === false) {
 419 |       return null;
 420 |     }
 421 | 
 422 |     return {
 423 |       onMouseOver() {
 424 |         self.handleMouseOver();
 425 |       },
 426 |       onMouseOut() {
 427 |         self.handleMouseOut();
 428 |       },
 429 |       onMouseDown(e) {
 430 |         self.touchObject = {
 431 |           startX: e.clientX,
 432 |           startY: e.clientY,
 433 |         };
 434 | 
 435 |         self.setState({
 436 |           dragging: true,
 437 |         });
 438 |       },
 439 |       onMouseMove(e) {
 440 |         if (!self.state.dragging) {
 441 |           return;
 442 |         }
 443 | 
 444 |         const direction = self.swipeDirection(
 445 |           self.touchObject.startX,
 446 |           e.clientX,
 447 |           self.touchObject.startY,
 448 |           e.clientY,
 449 |         );
 450 | 
 451 |         if (direction !== 0) {
 452 |           e.preventDefault();
 453 |         }
 454 | 
 455 |         const length = self.props.vertical ? Math.round(
 456 |           Math.sqrt(Math.pow(e.clientY - self.touchObject.startY, 2)),
 457 |         ) : Math.round(
 458 |           Math.sqrt(Math.pow(e.clientX - self.touchObject.startX, 2)),
 459 |         );
 460 | 
 461 |         self.touchObject = {
 462 |           startX: self.touchObject.startX,
 463 |           startY: self.touchObject.startY,
 464 |           endX: e.clientX,
 465 |           endY: e.clientY,
 466 |           length,
 467 |           direction,
 468 |         };
 469 | 
 470 |         self.setState({
 471 |           left: self.props.vertical ? 0 : self.getTargetLeft(self.touchObject.length * self.touchObject.direction),
 472 |           top: self.props.vertical ? self.getTargetLeft(self.touchObject.length * self.touchObject.direction) : 0,
 473 |         });
 474 |       },
 475 |       onMouseUp(e) {
 476 |         if (!self.state.dragging) {
 477 |           return;
 478 |         }
 479 | 
 480 |         self.handleSwipe(e);
 481 |       },
 482 |       onMouseLeave(e) {
 483 |         if (!self.state.dragging) {
 484 |           return;
 485 |         }
 486 | 
 487 |         self.handleSwipe(e);
 488 |       },
 489 |     };
 490 |   }
 491 | 
 492 |   handleMouseOver() {
 493 |     if (this.props.autoplay) {
 494 |       this.autoplayPaused = true;
 495 |       this.stopAutoplay();
 496 |     }
 497 |   }
 498 | 
 499 |   handleMouseOut() {
 500 |     if (this.props.autoplay && this.autoplayPaused) {
 501 |       this.startAutoplay();
 502 |       this.autoplayPaused = null;
 503 |     }
 504 |   }
 505 | 
 506 |   handleClick = (e) => {
 507 |     if (this.clickSafe === true) {
 508 |       e.preventDefault();
 509 |       e.stopPropagation();
 510 | 
 511 |       if (e.nativeEvent) {
 512 |         e.nativeEvent.stopPropagation();
 513 |       }
 514 |     }
 515 |   }
 516 | 
 517 |   handleSwipe(_) {
 518 |     if (typeof (this.touchObject.length) !== 'undefined' && this.touchObject.length > 44) {
 519 |       this.clickSafe = true;
 520 |     } else {
 521 |       this.clickSafe = false;
 522 |     }
 523 | 
 524 |     let { slidesToShow, slidesToScroll, swipeSpeed } = this.props;
 525 |     // var slidesToShow = this.props.slidesToShow;
 526 |     if (slidesToScroll === 'auto') {
 527 |       slidesToShow = this.state.slidesToScroll;
 528 |     }
 529 |     if (React.Children.count(this.props.children) > 1 && this.touchObject.length > (this.state.slideWidth / slidesToShow!) / swipeSpeed!) {
 530 |       if (this.touchObject.direction === 1) {
 531 |         if (
 532 |           this.state.currentSlide >= React.Children.count(this.props.children) - slidesToShow! &&
 533 |           !this.props.wrapAround
 534 |         ) {
 535 |           this.animateSlide(this.props.edgeEasing);
 536 |         } else {
 537 |           this.nextSlide();
 538 |         }
 539 |       } else if (this.touchObject.direction === -1) {
 540 |         if (this.state.currentSlide <= 0 && !this.props.wrapAround) {
 541 |           this.animateSlide(this.props.edgeEasing);
 542 |         } else {
 543 |           this.previousSlide();
 544 |         }
 545 |       }
 546 |     } else {
 547 |       this.goToSlide(this.state.currentSlide);
 548 |     }
 549 | 
 550 |     this.touchObject = {};
 551 | 
 552 |     this.setState({
 553 |       dragging: false,
 554 |     });
 555 |   }
 556 | 
 557 |   swipeDirection(x1, x2, y1, y2) {
 558 |     let xDist = x1 - x2;
 559 |     let yDist = y1 - y2;
 560 |     let r = Math.atan2(yDist, xDist);
 561 |     let swipeAngle = Math.round(r * 180 / Math.PI);
 562 | 
 563 |     if (swipeAngle < 0) {
 564 |       swipeAngle = 360 - Math.abs(swipeAngle);
 565 |     }
 566 |     if ((swipeAngle <= 45) && (swipeAngle >= 0)) {
 567 |       return 1;
 568 |     }
 569 |     if ((swipeAngle <= 360) && (swipeAngle >= 315)) {
 570 |       return 1;
 571 |     }
 572 |     if ((swipeAngle >= 135) && (swipeAngle <= 225)) {
 573 |       return -1;
 574 |     }
 575 |     if (this.props.vertical === true) {
 576 |       if ((swipeAngle >= 35) && (swipeAngle <= 135)) {
 577 |         return 1;
 578 |       } else {
 579 |         return -1;
 580 |       }
 581 |     }
 582 |     return 0;
 583 | 
 584 |   }
 585 | 
 586 |   autoplayIterator = () => {
 587 |     if (this.props.wrapAround) {
 588 |       return this.nextSlide();
 589 |     }
 590 |     if (this.state.currentSlide !== this.state.slideCount - this.state.slidesToShow) {
 591 |       this.nextSlide();
 592 |     } else {
 593 |       this.stopAutoplay();
 594 |     }
 595 |   }
 596 | 
 597 |   startAutoplay() {
 598 |     if (React.Children.count(this.props.children) <= 1) {
 599 |       return;
 600 |     }
 601 |     this.autoplayID = setInterval(this.autoplayIterator, this.props.autoplayInterval);
 602 |   }
 603 | 
 604 |   resetAutoplay() {
 605 |     if (this.props.resetAutoplay && this.props.autoplay && !this.autoplayPaused) {  // by warmhug
 606 |       this.stopAutoplay();
 607 |       this.startAutoplay();
 608 |     }
 609 |   }
 610 | 
 611 |   stopAutoplay() {
 612 |     if (this.autoplayID) {
 613 |       clearInterval(this.autoplayID);
 614 |     }
 615 |   }
 616 | 
 617 |   // Action Methods
 618 | 
 619 |   goToSlide = (index) => {
 620 |     let { beforeSlide, afterSlide } = this.props;
 621 |     if ((index >= React.Children.count(this.props.children) || index < 0)) {
 622 |       if (!this.props.wrapAround) { return; };
 623 |       if (index >= React.Children.count(this.props.children)) {
 624 |         beforeSlide!(this.state.currentSlide, 0);
 625 |         return this.setState({
 626 |           currentSlide: 0,
 627 |         }, () => {
 628 |           this.animateSlide(null, null, this.getTargetLeft(null, index), () => {
 629 |             this.animateSlide(null, 0.01);
 630 |             afterSlide!(0);
 631 |             this.resetAutoplay();
 632 |             this.setExternalData();
 633 |           });
 634 |         });
 635 |       } else {
 636 |         const endSlide = React.Children.count(this.props.children) - this.state.slidesToScroll;
 637 |         beforeSlide!(this.state.currentSlide, endSlide);
 638 |         return this.setState({
 639 |           currentSlide: endSlide,
 640 |         }, () => {
 641 |           this.animateSlide(null, null, this.getTargetLeft(null, index), () => {
 642 |             this.animateSlide(null, 0.01);
 643 |             afterSlide!(endSlide);
 644 |             this.resetAutoplay();
 645 |             this.setExternalData();
 646 |           });
 647 |         });
 648 |       }
 649 |     }
 650 | 
 651 |     beforeSlide!(this.state.currentSlide, index);
 652 | 
 653 |     this.setState({
 654 |       currentSlide: index,
 655 |     }, () => {
 656 |       this.animateSlide();
 657 |       this.props.afterSlide!(index);
 658 |       this.resetAutoplay();
 659 |       this.setExternalData();
 660 |     });
 661 |   }
 662 | 
 663 |   nextSlide = () => {
 664 |     const childrenCount = React.Children.count(this.props.children);
 665 |     let slidesToShow: number = this.props.slidesToShow!;
 666 |     if (this.props.slidesToScroll === 'auto') {
 667 |       slidesToShow = this.state.slidesToScroll;
 668 |     }
 669 |     if (this.state.currentSlide >= childrenCount - slidesToShow && !this.props.wrapAround) {
 670 |       return;
 671 |     }
 672 | 
 673 |     if (this.props.wrapAround) {
 674 |       this.goToSlide(this.state.currentSlide + this.state.slidesToScroll);
 675 |     } else {
 676 |       if (this.props.slideWidth !== 1) {
 677 |         return this.goToSlide(this.state.currentSlide + this.state.slidesToScroll);
 678 |       }
 679 |       this.goToSlide(
 680 |         Math.min(this.state.currentSlide + this.state.slidesToScroll, childrenCount - slidesToShow),
 681 |       );
 682 |     }
 683 |   }
 684 | 
 685 |   previousSlide = () => {
 686 |     if (this.state.currentSlide <= 0 && !this.props.wrapAround) {
 687 |       return;
 688 |     }
 689 | 
 690 |     if (this.props.wrapAround) {
 691 |       this.goToSlide(this.state.currentSlide - this.state.slidesToScroll);
 692 |     } else {
 693 |       this.goToSlide(Math.max(0, this.state.currentSlide - this.state.slidesToScroll));
 694 |     }
 695 |   }
 696 | 
 697 |   // Animation
 698 | 
 699 |   animateSlide(easing?: any, duration?: any, endValue?: any, callback?: Function) {
 700 |     this.tweenState(this.props.vertical ? 'top' : 'left', {
 701 |       easing: easing || this.props.easing,
 702 |       duration: duration || this.props.speed,
 703 |       endValue: endValue || this.getTargetLeft(),
 704 |       delay: null,
 705 |       beginValue: null,
 706 |       onEnd: callback || null,
 707 |       stackBehavior,
 708 |     });
 709 |   }
 710 | 
 711 |   getTargetLeft(touchOffset?: any, slide?: any) {
 712 |     let offset;
 713 |     let target = slide || this.state.currentSlide;
 714 |     let cellSpacing: number = this.props.cellSpacing!;
 715 |     switch (this.props.cellAlign) {
 716 |       case 'left': {
 717 |         offset = 0;
 718 |         offset -= cellSpacing * (target);
 719 |         break;
 720 |       }
 721 |       case 'center': {
 722 |         offset = (this.state.frameWidth - this.state.slideWidth) / 2;
 723 |         offset -= cellSpacing * (target);
 724 |         break;
 725 |       }
 726 |       case 'right': {
 727 |         offset = this.state.frameWidth - this.state.slideWidth;
 728 |         offset -= cellSpacing * (target);
 729 |         break;
 730 |       }
 731 |       default:
 732 |         break;
 733 |     }
 734 | 
 735 |     let left = this.state.slideWidth * target;
 736 | 
 737 |     let lastSlide = this.state.currentSlide > 0 && target + this.state.slidesToScroll >= this.state.slideCount;
 738 | 
 739 |     if (lastSlide && this.props.slideWidth !== 1 && !this.props.wrapAround && this.props.slidesToScroll === 'auto') {
 740 |       left = (this.state.slideWidth * this.state.slideCount) - this.state.frameWidth;
 741 |       offset = 0;
 742 |       offset -= cellSpacing * (this.state.slideCount - 1);
 743 |     }
 744 | 
 745 |     offset -= touchOffset || 0;
 746 | 
 747 |     return (left - offset) * -1;
 748 |   }
 749 | 
 750 |   // Bootstrapping
 751 | 
 752 |   bindEvents() {
 753 |     if (ExecutionEnvironment.canUseDOM) {
 754 |       addEvent(window, 'resize', this.onResize);
 755 |       addEvent(document, 'readystatechange', this.onReadyStateChange);
 756 |     }
 757 |   }
 758 | 
 759 |   onResize = () => {
 760 |     this.setDimensions();
 761 |   }
 762 | 
 763 |   onReadyStateChange = () => {
 764 |     this.setDimensions();
 765 |   }
 766 | 
 767 |   unbindEvents() {
 768 |     if (ExecutionEnvironment.canUseDOM) {
 769 |       removeEvent(window, 'resize', this.onResize);
 770 |       removeEvent(document, 'readystatechange', this.onReadyStateChange);
 771 |     }
 772 |   }
 773 | 
 774 |   formatChildren(children) {
 775 |     const positionValue = this.props.vertical ? this.getTweeningValue('top') : this.getTweeningValue('left');
 776 |     return React.Children.map(children, (child, index) => {
 777 |       return <li className="slider-slide" style={this.getSlideStyles(index, positionValue)} key={index}>{child}</li>;
 778 |     });
 779 |   }
 780 | 
 781 |   setInitialDimensions() {
 782 |     let { vertical, initialSlideHeight, initialSlideWidth, slidesToShow, cellSpacing, children } = this.props;
 783 |     const slideWidth = vertical ? (initialSlideHeight || 0) : (initialSlideWidth || 0);
 784 |     const slideHeight = initialSlideHeight ? initialSlideHeight * slidesToShow! : 0;
 785 |     const frameHeight = slideHeight + (cellSpacing! * (slidesToShow! - 1));
 786 | 
 787 |     this.setState({
 788 |       slideHeight,
 789 |       frameWidth: vertical ? frameHeight : '100%',
 790 |       slideCount: React.Children.count(children),
 791 |       slideWidth,
 792 |     }, () => {
 793 |       this.setLeft();
 794 |       this.setExternalData();
 795 |     });
 796 |   }
 797 | 
 798 |   setDimensions(props?: any) {
 799 |     props = props || this.props;
 800 | 
 801 |     let frameWidth;
 802 |     let frameHeight;
 803 |     let slideHeight;
 804 |     let slideWidth;
 805 |     let slidesToScroll = props.slidesToScroll;
 806 |     let frame = this.refs.frame;
 807 |     let firstSlide = (frame as any).childNodes[0].childNodes[0];
 808 | 
 809 |     if (firstSlide) {
 810 |       firstSlide.style.height = 'auto';
 811 |       slideHeight = this.props.vertical ?
 812 |         firstSlide.offsetHeight * props.slidesToShow :
 813 |         firstSlide.offsetHeight;
 814 |     } else {
 815 |       slideHeight = 100;
 816 |     }
 817 | 
 818 |     if (typeof props.slideWidth !== 'number') {
 819 |       slideWidth = parseInt(props.slideWidth, 10);
 820 |     } else {
 821 |       if (props.vertical) {
 822 |         slideWidth = (slideHeight / props.slidesToShow) * props.slideWidth;
 823 |       } else {
 824 |         slideWidth = ((frame as any).offsetWidth / props.slidesToShow) * props.slideWidth;
 825 |       }
 826 |     }
 827 | 
 828 |     if (!props.vertical) {
 829 |       slideWidth -= props.cellSpacing * ((100 - (100 / props.slidesToShow)) / 100);
 830 |     }
 831 | 
 832 |     frameHeight = slideHeight + (props.cellSpacing * (props.slidesToShow - 1));
 833 |     frameWidth = props.vertical ? frameHeight : (frame as any).offsetWidth;
 834 | 
 835 |     if (props.slidesToScroll === 'auto') {
 836 |       slidesToScroll = Math.floor(frameWidth / (slideWidth + props.cellSpacing));
 837 |     }
 838 | 
 839 |     this.setState({
 840 |       slideHeight,
 841 |       frameWidth,
 842 |       slideWidth,
 843 |       slidesToScroll,
 844 |       left: props.vertical ? 0 : this.getTargetLeft(),
 845 |       top: props.vertical ? this.getTargetLeft() : 0,
 846 |     }, () => {
 847 |       this.setLeft();
 848 |     });
 849 |   }
 850 | 
 851 |   setLeft() {
 852 |     this.setState({
 853 |       left: this.props.vertical ? 0 : this.getTargetLeft(),
 854 |       top: this.props.vertical ? this.getTargetLeft() : 0,
 855 |     });
 856 |   }
 857 | 
 858 |   // Data
 859 | 
 860 |   setExternalData() {
 861 |     if (this.props.data) {
 862 |       this.props.data();
 863 |     }
 864 |   }
 865 | 
 866 |   // Styles
 867 | 
 868 |   getListStyles() {
 869 |     let listWidth = this.state.slideWidth * React.Children.count(this.props.children);
 870 |     let cellSpacing = this.props.cellSpacing!;
 871 |     let spacingOffset = cellSpacing * React.Children.count(this.props.children);
 872 |     let transform = 'translate3d(' +
 873 |       this.getTweeningValue('left') + 'px, ' +
 874 |       this.getTweeningValue('top') + 'px, 0)';
 875 |     return {
 876 |       transform,
 877 |       WebkitTransform: transform,
 878 |       msTransform: 'translate(' +
 879 |         this.getTweeningValue('left') + 'px, ' +
 880 |         this.getTweeningValue('top') + 'px)',
 881 |       position: 'relative',
 882 |       display: 'block',
 883 |       margin: this.props.vertical ? (cellSpacing / 2) * -1 + 'px 0px'
 884 |                                   : '0px ' + (cellSpacing / 2) * -1 + 'px',
 885 |       padding: 0,
 886 |       height: this.props.vertical ? listWidth + spacingOffset : this.state.slideHeight,
 887 |       width: this.props.vertical ? 'auto' : listWidth + spacingOffset,
 888 |       cursor: this.state.dragging === true ? 'pointer' : 'inherit',
 889 |       boxSizing: 'border-box',
 890 |       MozBoxSizing: 'border-box',
 891 |     } as React.CSSProperties;
 892 |   }
 893 | 
 894 |   getFrameStyles() {
 895 |     return {
 896 |       position: 'relative',
 897 |       display: 'block',
 898 |       overflow: this.props.frameOverflow,
 899 |       height: this.props.vertical ? this.state.frameWidth || 'initial' : 'auto',
 900 |       margin: this.props.framePadding,
 901 |       padding: 0,
 902 |       transform: 'translate3d(0, 0, 0)',
 903 |       WebkitTransform: 'translate3d(0, 0, 0)',
 904 |       msTransform: 'translate(0, 0)',
 905 |       boxSizing: 'border-box',
 906 |       MozBoxSizing: 'border-box',
 907 |     } as React.CSSProperties;
 908 |   }
 909 | 
 910 |   getSlideStyles(index, positionValue) {
 911 |     let targetPosition = this.getSlideTargetPosition(index, positionValue);
 912 |     let cellSpacing: number = this.props.cellSpacing!;
 913 |     return {
 914 |       position: 'absolute',
 915 |       left: this.props.vertical ? 0 : targetPosition,
 916 |       top: this.props.vertical ? targetPosition : 0,
 917 |       display: this.props.vertical ? 'block' : 'inline-block',
 918 |       listStyleType: 'none',
 919 |       verticalAlign: 'top',
 920 |       width: this.props.vertical ? '100%' : this.state.slideWidth,
 921 |       height: 'auto',
 922 |       boxSizing: 'border-box',
 923 |       MozBoxSizing: 'border-box',
 924 |       marginLeft: this.props.vertical ? 'auto' : cellSpacing / 2,
 925 |       marginRight: this.props.vertical ? 'auto' : cellSpacing / 2,
 926 |       marginTop: this.props.vertical ? cellSpacing / 2 : 'auto',
 927 |       marginBottom: this.props.vertical ? cellSpacing / 2 : 'auto',
 928 |     } as React.CSSProperties;
 929 |   }
 930 | 
 931 |   getSlideTargetPosition(index, positionValue) {
 932 |     let slidesToShow = (this.state.frameWidth / this.state.slideWidth);
 933 |     let targetPosition = (this.state.slideWidth + this.props.cellSpacing) * index;
 934 |     let end = ((this.state.slideWidth + this.props.cellSpacing) * slidesToShow) * -1;
 935 | 
 936 |     if (this.props.wrapAround) {
 937 |       let slidesBefore = Math.ceil(positionValue / (this.state.slideWidth));
 938 |       if (this.state.slideCount - slidesBefore <= index) {
 939 |         return (this.state.slideWidth + this.props.cellSpacing) *
 940 |           (this.state.slideCount - index) * -1;
 941 |       }
 942 | 
 943 |       let slidesAfter = Math.ceil((Math.abs(positionValue) - Math.abs(end)) / this.state.slideWidth);
 944 | 
 945 |       if (this.state.slideWidth !== 1) {
 946 |         slidesAfter = Math.ceil((Math.abs(positionValue) - (this.state.slideWidth)) / this.state.slideWidth);
 947 |       }
 948 | 
 949 |       if (index <= slidesAfter - 1) {
 950 |         return (this.state.slideWidth + this.props.cellSpacing) * (this.state.slideCount + index);
 951 |       }
 952 |     }
 953 | 
 954 |     return targetPosition;
 955 |   }
 956 | 
 957 |   getSliderStyles() {
 958 |     return {
 959 |       position: 'relative',
 960 |       display: 'block',
 961 |       width: this.props.width,
 962 |       height: 'auto',
 963 |       boxSizing: 'border-box',
 964 |       MozBoxSizing: 'border-box',
 965 |       visibility: this.state.slideWidth ? 'visible' : 'hidden',
 966 |     };
 967 |   }
 968 | 
 969 |   getStyleTagStyles() {
 970 |     return '.slider-slide > img {width: 100%; display: block;}';
 971 |   }
 972 | 
 973 |   getDecoratorStyles(position) {
 974 |     switch (position) {
 975 |     case 'TopLeft':
 976 |       {
 977 |         return {
 978 |           position: 'absolute',
 979 |           top: 0,
 980 |           left: 0,
 981 |         };
 982 |       }
 983 |     case 'TopCenter':
 984 |       {
 985 |         return {
 986 |           position: 'absolute',
 987 |           top: 0,
 988 |           left: '50%',
 989 |           transform: 'translateX(-50%)',
 990 |           WebkitTransform: 'translateX(-50%)',
 991 |           msTransform: 'translateX(-50%)',
 992 |         };
 993 |       }
 994 |     case 'TopRight':
 995 |       {
 996 |         return {
 997 |           position: 'absolute',
 998 |           top: 0,
 999 |           right: 0,
1000 |         };
1001 |       }
1002 |     case 'CenterLeft':
1003 |       {
1004 |         return {
1005 |           position: 'absolute',
1006 |           top: '50%',
1007 |           left: 0,
1008 |           transform: 'translateY(-50%)',
1009 |           WebkitTransform: 'translateY(-50%)',
1010 |           msTransform: 'translateY(-50%)',
1011 |         };
1012 |       }
1013 |     case 'CenterCenter':
1014 |       {
1015 |         return {
1016 |           position: 'absolute',
1017 |           top: '50%',
1018 |           left: '50%',
1019 |           transform: 'translate(-50%,-50%)',
1020 |           WebkitTransform: 'translate(-50%, -50%)',
1021 |           msTransform: 'translate(-50%, -50%)',
1022 |         };
1023 |       }
1024 |     case 'CenterRight':
1025 |       {
1026 |         return {
1027 |           position: 'absolute',
1028 |           top: '50%',
1029 |           right: 0,
1030 |           transform: 'translateY(-50%)',
1031 |           WebkitTransform: 'translateY(-50%)',
1032 |           msTransform: 'translateY(-50%)',
1033 |         };
1034 |       }
1035 |     case 'BottomLeft':
1036 |       {
1037 |         return {
1038 |           position: 'absolute',
1039 |           bottom: 0,
1040 |           left: 0,
1041 |         };
1042 |       }
1043 |     case 'BottomCenter':
1044 |       {
1045 |         return {
1046 |           position: 'absolute',
1047 |           bottom: 0,
1048 |           width: '100%',
1049 |           textAlign: 'center',
1050 |         };
1051 |       }
1052 |     case 'BottomRight':
1053 |       {
1054 |         return {
1055 |           position: 'absolute',
1056 |           bottom: 0,
1057 |           right: 0,
1058 |         };
1059 |       }
1060 |     default:
1061 |       {
1062 |         return {
1063 |           position: 'absolute',
1064 |           top: 0,
1065 |           left: 0,
1066 |         };
1067 |       }
1068 |     }
1069 |   }
1070 | }
1071 | 
1072 | export default Carousel;
1073 | 


--------------------------------------------------------------------------------