From ebf1c3ed25172e72955e55ca09d8d5ed0f20cf85 Mon Sep 17 00:00:00 2001
From: sorrycc <sorrycc@gmail.com>
Date: Mon, 3 Aug 2015 14:52:26 +0800
Subject: [PATCH 1/4] add Carousel

---
 components/carousel/demo/autoplay.md       |  21 ++++
 components/carousel/demo/basic.md          |  20 ++++
 components/carousel/demo/fade.md           |  21 ++++
 components/carousel/demo/vertical.md       |  20 ++++
 components/carousel/index.jsx              |  34 ++++++
 components/carousel/index.md               |  30 ++++++
 index.js                                   |   1 +
 package.json                               |   3 +-
 style/components/carousel/slick-theme.less | 119 +++++++++++++++++++++
 style/components/carousel/slick.less       | 102 ++++++++++++++++++
 style/components/index.less                |   2 +
 11 files changed, 372 insertions(+), 1 deletion(-)
 create mode 100644 components/carousel/demo/autoplay.md
 create mode 100644 components/carousel/demo/basic.md
 create mode 100644 components/carousel/demo/fade.md
 create mode 100644 components/carousel/demo/vertical.md
 create mode 100644 components/carousel/index.jsx
 create mode 100644 style/components/carousel/slick-theme.less
 create mode 100644 style/components/carousel/slick.less

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(
+  <Carousel autoplay="true">
+    <div><h3>1</h3></div>
+    <div><h3>2</h3></div>
+    <div><h3>3</h3></div>
+    <div><h3>4</h3></div>
+  </Carousel>
+, 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(
+  <Carousel>
+    <div><h3>1</h3></div>
+    <div><h3>2</h3></div>
+    <div><h3>3</h3></div>
+    <div><h3>4</h3></div>
+  </Carousel>
+, 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(
+  <Carousel effect="fade">
+    <div><h3>1</h3></div>
+    <div><h3>2</h3></div>
+    <div><h3>3</h3></div>
+    <div><h3>4</h3></div>
+  </Carousel>
+, 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(
+  <Carousel vertical="true">
+    <div><h3>1</h3></div>
+    <div><h3>2</h3></div>
+    <div><h3>3</h3></div>
+    <div><h3>4</h3></div>
+  </Carousel>
+, 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 (
+      <div className={className}>
+        <Carousel {...props} />
+      </div>
+    );
+  }
+});
+
+export default AntCarousel;
diff --git a/components/carousel/index.md b/components/carousel/index.md
index e3767bb4c9..1f3762034b 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 | 无
+
+<style>
+.slick-slide {
+  text-align: center;
+  height: 100px;
+  line-height: 100px;
+  background: #71B5DE;
+  color: #fff;
+  overflow: hidden;
+}
+#components-carousel-demo-vertical .ant-carousel {
+  margin-right: 35px;
+}
+</style>
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..25f0fa3ada
--- /dev/null
+++ b/style/components/carousel/slick-theme.less
@@ -0,0 +1,119 @@
+
+/* 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 {
+  margin-bottom: 30px;
+}
+
+.slick-dots {
+  position: absolute;
+  bottom: -45px;
+  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-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..7aa122df64
--- /dev/null
+++ b/style/components/carousel/slick.less
@@ -0,0 +1,102 @@
+
+.slick-slider {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: 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 {
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  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 & {
+    display: block;
+  }
+
+  .slick-loading & {
+    visibility: hidden;
+  }
+
+  .slick-vertical & {
+    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";

From 6b7f2e543b5157efa43e81d486b88883b77d3b29 Mon Sep 17 00:00:00 2001
From: sorrycc <sorrycc@gmail.com>
Date: Mon, 3 Aug 2015 17:01:42 +0800
Subject: [PATCH 2/4] dots element take place

---
 style/components/carousel/slick-theme.less | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/style/components/carousel/slick-theme.less b/style/components/carousel/slick-theme.less
index 25f0fa3ada..e1150bc735 100644
--- a/style/components/carousel/slick-theme.less
+++ b/style/components/carousel/slick-theme.less
@@ -47,12 +47,12 @@
 /* Dots */
 
 .slick-slider {
-  margin-bottom: 30px;
+  padding-bottom: 45px;
 }
 
 .slick-dots {
   position: absolute;
-  bottom: -45px;
+  bottom: 0px;
   list-style: none;
   display: block;
   text-align: center;
@@ -110,6 +110,10 @@
 
 .ant-carousel-vertical {
 
+  .slick-slider {
+    padding-bottom: 0;
+  }
+
   .slick-dots {
     width: 20px;
     bottom: auto;

From cb1ce102ff41fd5c837e2be0c5f0295368ee896d Mon Sep 17 00:00:00 2001
From: sorrycc <sorrycc@gmail.com>
Date: Mon, 3 Aug 2015 17:45:58 +0800
Subject: [PATCH 3/4] move style declaractions under .ant-carousel

---
 components/carousel/index.md               |   2 +-
 style/components/carousel/slick-theme.less | 171 +++++++++++----------
 style/components/carousel/slick.less       | 154 +++++++++----------
 3 files changed, 165 insertions(+), 162 deletions(-)

diff --git a/components/carousel/index.md b/components/carousel/index.md
index 1f3762034b..a0944e0a40 100644
--- a/components/carousel/index.md
+++ b/components/carousel/index.md
@@ -23,7 +23,7 @@
 | onChange         | 切换面板的回调                               | Function | 无
 
 <style>
-.slick-slide {
+.ant-carousel .slick-slide {
   text-align: center;
   height: 100px;
   line-height: 100px;
diff --git a/style/components/carousel/slick-theme.less b/style/components/carousel/slick-theme.less
index e1150bc735..d5124f26f6 100644
--- a/style/components/carousel/slick-theme.less
+++ b/style/components/carousel/slick-theme.less
@@ -1,110 +1,113 @@
 
-/* Arrows */
+.ant-carousel {
 
-.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;
+  /* 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;
-    &:before {
-      opacity: 1;
+    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-disabled:before {
-    opacity: 0.25;
-  }
-}
 
-.slick-prev {
-  left: -25px;
-  &:before {
-    content: "←";
+  .slick-prev {
+    left: -25px;
+    &:before {
+      content: "←";
+    }
   }
-}
 
-.slick-next {
-  right: -25px;
-  &:before {
-    content: "→";
+  .slick-next {
+    right: -25px;
+    &:before {
+      content: "→";
+    }
   }
-}
 
-/* Dots */
+  /* Dots */
 
-.slick-slider {
-  padding-bottom: 45px;
-}
+  .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;
+  .slick-dots {
+    position: absolute;
+    bottom: 0px;
+    list-style: none;
+    display: block;
+    text-align: center;
     padding: 0;
-    cursor: pointer;
-    button {
-      border: 0;
-      background: transparent;
-      display: block;
+    width: 100%;
+    li {
+      position: relative;
+      display: inline-block;
       height: 20px;
       width: 20px;
-      outline: none;
-      line-height: 0px;
-      font-size: 0px;
-      color: transparent;
-      padding: 5px;
+      margin: 0 5px;
+      padding: 0;
       cursor: pointer;
-      &:hover, &:focus {
+      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 {
-          opacity: 1;
+          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;
         }
       }
-      &: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;
       }
     }
-    &.slick-active button:before {
-      color: black;
-      opacity: 0.75;
-    }
   }
 }
 
diff --git a/style/components/carousel/slick.less b/style/components/carousel/slick.less
index 7aa122df64..f4d9a46e17 100644
--- a/style/components/carousel/slick.less
+++ b/style/components/carousel/slick.less
@@ -1,102 +1,102 @@
 
-.slick-slider {
-  position: relative;
-  display: block;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: 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;
-  }
+.ant-carousel {
 
-  &.dragging {
-    cursor: pointer;
-    cursor: hand;
+  .slick-slider {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
   }
-}
-.slick-slider .slick-track,
-.slick-slider .slick-list {
-  -webkit-transform: translate3d(0, 0, 0);
-  -moz-transform: translate3d(0, 0, 0);
-  -ms-transform: translate3d(0, 0, 0);
-  -o-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-}
+  .slick-list {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    margin: 0;
+    padding: 0;
 
-.slick-track {
-  position: relative;
-  left: 0;
-  top: 0;
-  display: block;
+    &:focus {
+      outline: none;
+    }
 
-  &:before,
-  &:after {
-    content: "";
-    display: table;
+    &.dragging {
+      cursor: pointer;
+      cursor: hand;
+    }
   }
-
-  &:after {
-    clear: both;
+  .slick-slider .slick-track,
+  .slick-slider .slick-list {
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
   }
 
-  .slick-loading & {
-    visibility: hidden;
-  }
-}
-.slick-slide {
-  float: left;
-  height: 100%;
-  min-height: 1px;
-  [dir="rtl"] & {
-    float: right;
-  }
-  img {
+  .slick-track {
+    position: relative;
+    left: 0;
+    top: 0;
     display: block;
+
+    &:before,
+    &:after {
+      content: "";
+      display: table;
+    }
+
+    &:after {
+      clear: both;
+    }
+
+    .slick-loading & {
+      visibility: hidden;
+    }
   }
-  &.slick-loading img {
-    display: none;
-  }
+  .slick-slide {
+    float: left;
+    height: 100%;
+    min-height: 1px;
+    [dir="rtl"] & {
+      float: right;
+    }
+    img {
+      display: block;
+    }
+    &.slick-loading img {
+      display: none;
+    }
 
-  display: none;
+    display: none;
 
-  &.dragging img {
-    pointer-events: none;
+    &.dragging img {
+      pointer-events: none;
+    }
   }
 
-  .slick-initialized & {
+  .slick-initialized .slick-slide {
     display: block;
   }
 
-  .slick-loading & {
+  .slick-loading .slick-slide {
     visibility: hidden;
   }
 
-  .slick-vertical & {
+  .slick-vertical .slick-slide {
     display: block;
     height: auto;
     border: 1px solid transparent;
   }
-}
-.slick-arrow.slick-hidden {
-  display: none;
-}
-
-
-
+  .slick-arrow.slick-hidden {
+    display: none;
+  }
 
+}

From 830e503218694be34deceb6acb8bba5458e825a4 Mon Sep 17 00:00:00 2001
From: sorrycc <sorrycc@gmail.com>
Date: Mon, 3 Aug 2015 17:49:09 +0800
Subject: [PATCH 4/4] remove css prefix

---
 style/components/carousel/slick.less | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/style/components/carousel/slick.less b/style/components/carousel/slick.less
index f4d9a46e17..e5384c8034 100644
--- a/style/components/carousel/slick.less
+++ b/style/components/carousel/slick.less
@@ -7,10 +7,6 @@
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     -ms-touch-action: pan-y;
     touch-action: pan-y;
@@ -34,10 +30,6 @@
   }
   .slick-slider .slick-track,
   .slick-slider .slick-list {
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    -o-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }