Merge pull request #107 from ant-design/Carousel

add Carousel

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'));
+````
+

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'));
+````

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'));
+````
+

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'));
+````

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;

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>
+.ant-carousel .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>

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'),

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",

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;
+  }
+}

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;
+  }
+
+}

style/components/index.less

@@ -26,3 +26,5 @@
 @import "tag";
 @import "alert";
 @import "tree";
+@import "carousel/slick";
+@import "carousel/slick-theme";