diff --git a/components/carousel/demo/autoplay.md b/components/carousel/demo/autoplay.md
new file mode 100644
index 0000000000..ec94166322
--- /dev/null
+++ b/components/carousel/demo/autoplay.md
@@ -0,0 +1,21 @@
+# 自动切换
+
+- order: 3
+
+定时切换下一张。
+
+---
+
+````jsx
+var Carousel = antd.Carousel;
+
+React.render(
+
+ 1
+ 2
+ 3
+ 4
+
+, document.getElementById('components-carousel-demo-autoplay'));
+````
+
diff --git a/components/carousel/demo/basic.md b/components/carousel/demo/basic.md
new file mode 100644
index 0000000000..e5715e1f60
--- /dev/null
+++ b/components/carousel/demo/basic.md
@@ -0,0 +1,20 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+var Carousel = antd.Carousel;
+
+React.render(
+
+ 1
+ 2
+ 3
+ 4
+
+, document.getElementById('components-carousel-demo-basic'));
+````
diff --git a/components/carousel/demo/fade.md b/components/carousel/demo/fade.md
new file mode 100644
index 0000000000..e04e18680b
--- /dev/null
+++ b/components/carousel/demo/fade.md
@@ -0,0 +1,21 @@
+# 渐显
+
+- order: 2
+
+切换效果为渐显。
+
+---
+
+````jsx
+var Carousel = antd.Carousel;
+
+React.render(
+
+ 1
+ 2
+ 3
+ 4
+
+, document.getElementById('components-carousel-demo-fade'));
+````
+
diff --git a/components/carousel/demo/vertical.md b/components/carousel/demo/vertical.md
new file mode 100644
index 0000000000..37726ba3b3
--- /dev/null
+++ b/components/carousel/demo/vertical.md
@@ -0,0 +1,20 @@
+# 垂直
+
+- order: 1
+
+垂直显示。
+
+---
+
+````jsx
+var Carousel = antd.Carousel;
+
+React.render(
+
+ 1
+ 2
+ 3
+ 4
+
+, document.getElementById('components-carousel-demo-vertical'));
+````
diff --git a/components/carousel/index.jsx b/components/carousel/index.jsx
new file mode 100644
index 0000000000..a3dd9d5750
--- /dev/null
+++ b/components/carousel/index.jsx
@@ -0,0 +1,34 @@
+import Carousel from 'react-slick';
+import React from 'react';
+import assign from 'object-assign';
+
+var AntCarousel = React.createClass({
+
+ getDefaultProps() {
+ return {
+ dots: true,
+ arrows: false
+ };
+ },
+
+ render() {
+ var props = assign({}, this.props);
+
+ if (props.effect === 'fade') {
+ props.fade = true;
+ }
+
+ var className = 'ant-carousel';
+ if (props.vertical) {
+ className = className + ' ant-carousel-vertical';
+ }
+
+ return (
+
+
+
+ );
+ }
+});
+
+export default AntCarousel;
diff --git a/components/carousel/index.md b/components/carousel/index.md
index e3767bb4c9..a0944e0a40 100644
--- a/components/carousel/index.md
+++ b/components/carousel/index.md
@@ -5,3 +5,33 @@
---
+旋转木马，轮播组件。
+
+## 何时使用
+
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------------------|----------------------------------------------|----------|---------------------------------|
+| effect | 动画效果函数，可取 scrollx, fade | String | scrollx |
+| arrow | 是否显示前后翻页箭头 | Boolean | false |
+| dots | 是否显示面板指示点 | Boolean | true |
+| vertical | 垂直显示 | Boolean | false |
+| autoplay | 是否自动切换 | Boolean | false |
+| easing | 动画效果 | String | linear |
+| onChange | 切换面板的回调 | Function | 无
+
+
diff --git a/index.js b/index.js
index 5fb9d84bf1..e4f92edacf 100644
--- a/index.js
+++ b/index.js
@@ -4,6 +4,7 @@ var antd = {
Affix: require('./components/affix'),
Datepicker: require('./components/datepicker'),
Tooltip: require('./components/tooltip'),
+ Carousel: require('./components/carousel'),
Tabs: require('./components/tabs'),
Modal: require('./components/modal'),
Menu: require('rc-menu'),
diff --git a/package.json b/package.json
index f2e5ac8a31..1a969f2c08 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,8 @@
"rc-tabs": "~5.2.0",
"rc-tooltip": "~2.4.0",
"rc-tree": "~0.10.0",
- "rc-util": "~2.0.3"
+ "rc-util": "~2.0.3",
+ "react-slick": "~0.6.4"
},
"devDependencies": {
"autoprefixer-loader": "~2.0.0",
diff --git a/style/components/carousel/slick-theme.less b/style/components/carousel/slick-theme.less
new file mode 100644
index 0000000000..d5124f26f6
--- /dev/null
+++ b/style/components/carousel/slick-theme.less
@@ -0,0 +1,126 @@
+
+.ant-carousel {
+
+ /* Arrows */
+
+ .slick-prev,
+ .slick-next {
+ position: absolute;
+ display: block;
+ height: 20px;
+ width: 20px;
+ line-height: 0px;
+ font-size: 0px;
+ cursor: pointer;
+ background: transparent;
+ color: transparent;
+ top: 50%;
+ margin-top: -10px;
+ padding: 0;
+ border: none;
+ outline: none;
+ &:hover, &:focus {
+ outline: none;
+ background: transparent;
+ color: transparent;
+ &:before {
+ opacity: 1;
+ }
+ }
+ &.slick-disabled:before {
+ opacity: 0.25;
+ }
+ }
+
+ .slick-prev {
+ left: -25px;
+ &:before {
+ content: "←";
+ }
+ }
+
+ .slick-next {
+ right: -25px;
+ &:before {
+ content: "→";
+ }
+ }
+
+ /* Dots */
+
+ .slick-slider {
+ padding-bottom: 45px;
+ }
+
+ .slick-dots {
+ position: absolute;
+ bottom: 0px;
+ list-style: none;
+ display: block;
+ text-align: center;
+ padding: 0;
+ width: 100%;
+ li {
+ position: relative;
+ display: inline-block;
+ height: 20px;
+ width: 20px;
+ margin: 0 5px;
+ padding: 0;
+ cursor: pointer;
+ button {
+ border: 0;
+ background: transparent;
+ display: block;
+ height: 20px;
+ width: 20px;
+ outline: none;
+ line-height: 0px;
+ font-size: 0px;
+ color: transparent;
+ padding: 5px;
+ cursor: pointer;
+ &:hover, &:focus {
+ outline: none;
+ &:before {
+ opacity: 1;
+ }
+ }
+ &:before {
+ position: absolute;
+ top: 0;
+ left: 0;
+ content: "•";
+ width: 20px;
+ height: 20px;
+ font-size: 18px;
+ font-family: arial, sans-serif;
+ line-height: 20px;
+ text-align: center;
+ color: gray;
+ opacity: 0.25;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+ }
+ &.slick-active button:before {
+ color: black;
+ opacity: 0.75;
+ }
+ }
+ }
+}
+
+.ant-carousel-vertical {
+
+ .slick-slider {
+ padding-bottom: 0;
+ }
+
+ .slick-dots {
+ width: 20px;
+ bottom: auto;
+ right: -35px;
+ top: 0;
+ }
+}
diff --git a/style/components/carousel/slick.less b/style/components/carousel/slick.less
new file mode 100644
index 0000000000..e5384c8034
--- /dev/null
+++ b/style/components/carousel/slick.less
@@ -0,0 +1,94 @@
+
+.ant-carousel {
+
+ .slick-slider {
+ position: relative;
+ display: block;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-touch-callout: none;
+ user-select: none;
+ -ms-touch-action: pan-y;
+ touch-action: pan-y;
+ -webkit-tap-highlight-color: transparent;
+ }
+ .slick-list {
+ position: relative;
+ overflow: hidden;
+ display: block;
+ margin: 0;
+ padding: 0;
+
+ &:focus {
+ outline: none;
+ }
+
+ &.dragging {
+ cursor: pointer;
+ cursor: hand;
+ }
+ }
+ .slick-slider .slick-track,
+ .slick-slider .slick-list {
+ transform: translate3d(0, 0, 0);
+ }
+
+ .slick-track {
+ position: relative;
+ left: 0;
+ top: 0;
+ display: block;
+
+ &:before,
+ &:after {
+ content: "";
+ display: table;
+ }
+
+ &:after {
+ clear: both;
+ }
+
+ .slick-loading & {
+ visibility: hidden;
+ }
+ }
+ .slick-slide {
+ float: left;
+ height: 100%;
+ min-height: 1px;
+ [dir="rtl"] & {
+ float: right;
+ }
+ img {
+ display: block;
+ }
+ &.slick-loading img {
+ display: none;
+ }
+
+ display: none;
+
+ &.dragging img {
+ pointer-events: none;
+ }
+ }
+
+ .slick-initialized .slick-slide {
+ display: block;
+ }
+
+ .slick-loading .slick-slide {
+ visibility: hidden;
+ }
+
+ .slick-vertical .slick-slide {
+ display: block;
+ height: auto;
+ border: 1px solid transparent;
+ }
+ .slick-arrow.slick-hidden {
+ display: none;
+ }
+
+}
diff --git a/style/components/index.less b/style/components/index.less
index 88107baaa8..e92fae7574 100644
--- a/style/components/index.less
+++ b/style/components/index.less
@@ -26,3 +26,5 @@
@import "tag";
@import "alert";
@import "tree";
+@import "carousel/slick";
+@import "carousel/slick-theme";