diff --git a/.eslintrc.json b/.eslintrc.json
index ee92fe4..f2a5d26 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -3,6 +3,7 @@
   "plugins": [
     "react"
   ],
+  "parser": "babel-eslint",
   "env": {
     "browser": true
   },
diff --git a/.travis.yml b/.travis.yml
index 6fc0e4a..5ed592e 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -2,12 +2,17 @@ language: node_js
 
 sudo: false
 
+addons:
+  apt:
+    packages:
+      - xvfb
+
 notification:
   email:
     - wsj7552715@hotmail.com
 
 node_js:
-- 4.0.0
+- 6.9.0
 
 before_install:
 - |
@@ -17,6 +22,11 @@ before_install:
     exit
   fi
   phantomjs --version
+install:
+  - export DISPLAY=':99.0'
+  - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
+  - npm install
+
 
 script:
 - |
@@ -25,7 +35,6 @@ script:
   else
     npm run $TEST_TYPE
   fi
-
 env:
   matrix:
   - TEST_TYPE=test
@@ -34,4 +43,4 @@ env:
 
 matrix:
   allow_failures:
-  - env: "TEST_TYPE=saucelabs"
+  - env: "TEST_TYPE=saucelabs"
\ No newline at end of file
diff --git a/demo/CarouselDemo.jsx b/demo/CarouselDemo.jsx
index 7705dce..ca591eb 100644
--- a/demo/CarouselDemo.jsx
+++ b/demo/CarouselDemo.jsx
@@ -6,9 +6,8 @@
  * All rights reserved.
  */
 
-const React = require('react');
-
-const Carousel = require('../src');
+import React from 'react';
+import Carousel from '../src';
 
 class Demo extends React.Component {
 
@@ -48,4 +47,4 @@ class Demo extends React.Component {
   }
 }
 
-module.exports = Demo;
+export default Demo;
diff --git a/demo/index.js b/demo/index.js
index e6946a2..516baa8 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -6,5 +6,8 @@
  * All rights reserved.
  */
 
- var Demo = require('./CarouselDemo');
- ReactDOM.render(<Demo/>, document.getElementById('UXCoreDemo'));
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Demo from './CarouselDemo';
+
+ReactDOM.render(<Demo />, document.getElementById('UXCoreDemo'));
diff --git a/package.json b/package.json
index f80cd62..a705f92 100644
--- a/package.json
+++ b/package.json
@@ -1,51 +1,55 @@
 {
- "name": "uxcore-carousel",
- "version": "0.3.6",
- "description": "uxcore-carousel component for uxcore.",
- "repository": "https://github.com/uxcore/uxcore-carousel.git",
- "author": "eternaslky",
- "main": "build/index.js",
- "scripts": {
-  "start": "uxcore-tools run start",
-  "server": "uxcore-tools run server",
-  "lint": "uxcore-tools run lint",
-  "build": "uxcore-tools run build",
-  "test": "uxcore-tools run test",
-  "coverage": "uxcore-tools run coverage",
-  "pub": "uxcore-tools run pub",
-  "dep": "uxcore-tools run dep",
-  "tnpm-dep": "uxcore-tools run tnpm-dep",
-  "chrome": "uxcore-tools run chrome",
-  "browsers": "uxcore-tools run browsers",
-  "saucelabs": "uxcore-tools run saucelabs",
-  "update": "uxcore-tools run update"
- },
- "bugs": {
-  "url": "http://github.com/uxcore/uxcore-carousel/issues"
- },
- "keywords": [
-  "react",
-  "react-component",
-  "uxcore-carousel",
-  "Carousel",
-  ""
- ],
- "devDependencies": {
-  "console-polyfill": "^0.2.2",
-  "es5-shim": "^4.5.8",
-  "expect.js": "~0.3.1",
-  "kuma-base": "1.x",
-  "react": "0.14.x",
-  "react-addons-test-utils": "0.14.x",
-  "react-dom": "0.14.x",
-  "uxcore-kuma": "2.x",
-  "uxcore-tools": "0.2.x"
- },
- "dependencies": {
-  "classnames": "^2.1.2",
-  "object-assign": "^4.0.0",
-  "react-slick": "0.14.8"
- },
- "contributors": [],
- "license": "MIT"
-}
\ No newline at end of file
+  "name": "uxcore-carousel",
+  "version": "0.3.6",
+  "description": "uxcore-carousel component for uxcore.",
+  "repository": "https://github.com/uxcore/uxcore-carousel.git",
+  "author": "eternaslky",
+  "main": "build/index.js",
+  "scripts": {
+    "start": "uxcore-tools run start",
+    "server": "uxcore-tools run server",
+    "lint": "uxcore-tools run lint",
+    "build": "uxcore-tools run build",
+    "test": "uxcore-tools run test",
+    "coverage": "uxcore-tools run coverage",
+    "pub": "uxcore-tools run pub",
+    "dep": "uxcore-tools run dep",
+    "tnpm-dep": "uxcore-tools run tnpm-dep",
+    "chrome": "uxcore-tools run chrome",
+    "browsers": "uxcore-tools run browsers",
+    "saucelabs": "uxcore-tools run saucelabs",
+    "update": "uxcore-tools run update",
+    "tnpm-update": "uxcore-tools run tnpm-update"
+  },
+  "bugs": {
+    "url": "http://github.com/uxcore/uxcore-carousel/issues"
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "uxcore-carousel",
+    "Carousel",
+    ""
+  ],
+  "devDependencies": {
+    "console-polyfill": "^0.2.2",
+    "enzyme": "^3.0.0",
+    "enzyme-adapter-react-15": "^1.0.0",
+    "es5-shim": "^4.5.8",
+    "expect.js": "~0.3.1",
+    "kuma-base": "1.x",
+    "react": "15.x",
+    "react-addons-test-utils": "^15.6.2",
+    "react-dom": "15.x",
+    "react-test-renderer": "15.x",
+    "uxcore-kuma": "*",
+    "uxcore-tools": "0.2.x"
+  },
+  "dependencies": {
+    "classnames": "^2.1.2",
+    "prop-types": "15.x",
+    "react-slick": "0.14.8"
+  },
+  "contributors": [],
+  "license": "MIT"
+}
diff --git a/src/Carousel.jsx b/src/Carousel.jsx
index 4c72bef..df1a12f 100644
--- a/src/Carousel.jsx
+++ b/src/Carousel.jsx
@@ -9,6 +9,11 @@
 // matchMedia polyfill for
 // https://github.com/WickyNilliams/enquire.js/issues/82
 
+import classnames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Slick from 'react-slick';
+
 if (typeof window !== 'undefined') {
   const matchMediaPolyfill = function matchMediaPolyfill() {
     return {
@@ -22,12 +27,24 @@ if (typeof window !== 'undefined') {
   window.matchMedia = window.matchMedia || matchMediaPolyfill;
 }
 
-const Slick = require('react-slick');
-const classnames = require('classnames');
-const React = require('react');
-
-
 class Carousel extends React.Component {
+  static displayName = 'Carousel';
+  static propTypes = {
+    centerDots: PropTypes.bool,
+    children: PropTypes.node,
+  };
+  static defaultProps = {
+    prefixCls: 'kuma-carousel',
+    largeArrowsAndDots: false,
+    dots: true,
+    cssEase: 'ease-out',
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    centerDots: true,
+    slidesToScroll: 1,
+    arrows: 'hover',
+  };
 
   processChildren() {
     const me = this;
@@ -40,8 +57,8 @@ class Carousel extends React.Component {
 
   render() {
     const me = this;
-
     const { className, prefixCls, centerDots, largeArrowsAndDots, ...props } = me.props;
+
     props.arrows = !!props.arrows;
 
     return (
@@ -62,26 +79,5 @@ class Carousel extends React.Component {
   }
 }
 
-Carousel.defaultProps = {
-  prefixCls: 'kuma-carousel',
-  largeArrowsAndDots: false,
-  dots: true,
-  cssEase: 'ease-out',
-  infinite: true,
-  speed: 500,
-  slidesToShow: 1,
-  centerDots: true,
-  slidesToScroll: 1,
-  arrows: 'hover'
-};
-
-
-// http://facebook.github.io/react/docs/reusable-components.html
-Carousel.propTypes = {
-  centerDots: React.PropTypes.bool,
-  children: React.PropTypes.node,
-};
-
-Carousel.displayName = 'Carousel';
+export default Carousel;
 
-module.exports = Carousel;
diff --git a/src/index.js b/src/index.js
index ca23f4a..eac93a2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,4 +6,6 @@
  * All rights reserved.
  */
 
-module.exports = require('./Carousel');
\ No newline at end of file
+import Carousel from './Carousel';
+
+export default Carousel;