From 6c9acb08fa34d9db51fdc661fd782926debcb728 Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Mon, 16 Jan 2017 02:45:11 -0600
Subject: [PATCH 01/16] initialize carousel

---
 src/components/carousel/carousel-item.vue | 10 ++++++++++
 src/components/carousel/carousel.vue      | 11 +++++++++++
 src/components/carousel/index.js          |  5 +++++
 src/index.js                              |  3 +++
 src/styles/components/carousel.less       |  6 ++++++
 test/app.vue                              |  1 +
 test/main.js                              |  5 +++++
 test/routers/carousel.vue                 |  9 +++++++++
 8 files changed, 50 insertions(+)
 create mode 100644 src/components/carousel/carousel-item.vue
 create mode 100644 src/components/carousel/carousel.vue
 create mode 100644 src/components/carousel/index.js
 create mode 100644 src/styles/components/carousel.less
 create mode 100644 test/routers/carousel.vue

diff --git a/src/components/carousel/carousel-item.vue b/src/components/carousel/carousel-item.vue
new file mode 100644
index 00000000..b995e94b
--- /dev/null
+++ b/src/components/carousel/carousel-item.vue
@@ -0,0 +1,10 @@
+<template>
+    <div :class="prefixCls"><slot></slot></div>
+</template>
+<script>
+    const prefixCls = 'ivu-carousel-item';
+
+    export default {
+        name: 'CarouselItem'
+    };
+</script>
diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
new file mode 100644
index 00000000..fb63eb08
--- /dev/null
+++ b/src/components/carousel/carousel.vue
@@ -0,0 +1,11 @@
+<template>
+    <div :class="prefixCls">
+    </div>
+</template>
+<script>
+    const prefixCls = 'ivu-cascader';
+
+    export default {
+        name: 'Carousel'
+    };
+</script>
diff --git a/src/components/carousel/index.js b/src/components/carousel/index.js
new file mode 100644
index 00000000..688b6268
--- /dev/null
+++ b/src/components/carousel/index.js
@@ -0,0 +1,5 @@
+import Carousel from './carousel.vue';
+import CarouselItem from './carousel-item.vue';
+
+Carousel.Item = CarouselItem;
+export default Carousel;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 6756a5be..47c52b1b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,6 +8,7 @@ import Badge from './components/badge';
 import Breadcrumb from './components/breadcrumb';
 import Button from './components/button';
 import Card from './components/card';
+import Carousel from './components/carousel';
 import Cascader from './components/cascader';
 import Checkbox from './components/checkbox';
 import Circle from './components/circle';
@@ -52,6 +53,8 @@ const iview = {
     iButton: Button,
     ButtonGroup: Button.Group,
     Card,
+    Carousel,
+    CarouselItem: Carousel.Item,
     Cascader,
     Checkbox,
     CheckboxGroup: Checkbox.Group,
diff --git a/src/styles/components/carousel.less b/src/styles/components/carousel.less
new file mode 100644
index 00000000..21a6eb0c
--- /dev/null
+++ b/src/styles/components/carousel.less
@@ -0,0 +1,6 @@
+@carousel-prefix-cls: ~"@{css-prefix}carousel";
+@carousel-item-prefix-cls: ~"@{css-prefix}carousel-item";
+
+.@{carousel-prefix-cls} {
+
+}
diff --git a/test/app.vue b/test/app.vue
index 3dfec764..19834737 100644
--- a/test/app.vue
+++ b/test/app.vue
@@ -47,6 +47,7 @@ li + li {
                 <li><a v-link="'/menu'">Menu</a></li>
                 <li><a v-link="'/date'">Date</a></li>
                 <li><a v-link="'/form'">Form</a></li>
+                <li><a v-link="'/carousel'">Carousel</a></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/test/main.js b/test/main.js
index 363135f9..9f6dd37d 100644
--- a/test/main.js
+++ b/test/main.js
@@ -134,6 +134,11 @@ router.map({
             require(['./routers/form.vue'], resolve);
         }
     },
+    '/carousel': {
+        component: function (resolve) {
+            require(['./routers/carousel.vue'], resolve);
+        }
+    },
 });
 
 router.beforeEach(function () {
diff --git a/test/routers/carousel.vue b/test/routers/carousel.vue
new file mode 100644
index 00000000..6db7e5f1
--- /dev/null
+++ b/test/routers/carousel.vue
@@ -0,0 +1,9 @@
+<template>
+    <Carousel>
+        <Carousel-item></Carousel-item>
+    </Carousel>
+</template>
+<script>
+    export default {
+    }
+</script>

From 41f83010fa023848550ab68e853461ec5eee7c02 Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Mon, 16 Jan 2017 02:59:46 -0600
Subject: [PATCH 02/16] update props and events

---
 src/components/carousel/carousel.vue | 50 ++++++++++++++++++++++++++--
 src/styles/components/carousel.less  |  7 +++-
 src/styles/components/index.less     |  3 +-
 test/routers/carousel.vue            |  6 ++++
 4 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
index fb63eb08..680cd56c 100644
--- a/src/components/carousel/carousel.vue
+++ b/src/components/carousel/carousel.vue
@@ -1,11 +1,55 @@
 <template>
-    <div :class="prefixCls">
+    <div :class="classes">
+        <slot></slot>
     </div>
 </template>
 <script>
-    const prefixCls = 'ivu-cascader';
+    import Icon from '../icon/icon.vue';
+
+    const prefixCls = 'ivu-carousel';
 
     export default {
-        name: 'Carousel'
+        name: 'Carousel',
+        props: {
+            arrows: {
+                type: Boolean,
+                default: false
+            },
+            autoplay: {
+                type: Boolean,
+                default: true
+            },
+            autoplaySpeed: {
+                type: Number,
+                default: 2000
+            },
+            easing: {
+                type: String,
+                default: 'ease'
+            },
+            dots: {
+                type: Boolean,
+                default: true
+            },
+            fade: {
+                type: Boolean,
+                default: false
+            },
+            vertical: {
+                type: Boolean,
+                default: false
+            }
+        },
+        // events: before-change(from, to), after-change(current, from)
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-vertical`]: this.vertical
+                    }
+                ];
+            }
+        }
     };
 </script>
diff --git a/src/styles/components/carousel.less b/src/styles/components/carousel.less
index 21a6eb0c..b4407175 100644
--- a/src/styles/components/carousel.less
+++ b/src/styles/components/carousel.less
@@ -2,5 +2,10 @@
 @carousel-item-prefix-cls: ~"@{css-prefix}carousel-item";
 
 .@{carousel-prefix-cls} {
-
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    user-select: none;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
 }
diff --git a/src/styles/components/index.less b/src/styles/components/index.less
index 07baccd4..d0ba5dfb 100644
--- a/src/styles/components/index.less
+++ b/src/styles/components/index.less
@@ -34,4 +34,5 @@
 @import "menu";
 @import "date-picker";
 @import "time-picker";
-@import "form";
\ No newline at end of file
+@import "form";
+@import "carousel";
\ No newline at end of file
diff --git a/test/routers/carousel.vue b/test/routers/carousel.vue
index 6db7e5f1..4dff7756 100644
--- a/test/routers/carousel.vue
+++ b/test/routers/carousel.vue
@@ -1,5 +1,11 @@
 <template>
     <Carousel>
+        <Carousel-item>test1</Carousel-item>
+        <Carousel-item>test2</Carousel-item>
+        <Carousel-item>test3</Carousel-item>
+    </Carousel>
+
+    <Carousel :vertical="true">
         <Carousel-item></Carousel-item>
     </Carousel>
 </template>

From 65c64ce93580dd05c4fed50496443324d8c5e63e Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Mon, 16 Jan 2017 04:00:52 -0600
Subject: [PATCH 03/16] carousel basic position

---
 src/components/carousel/carousel-item.vue |  20 +++-
 src/components/carousel/carousel.vue      | 111 +++++++++++++++++++++-
 src/styles/components/carousel.less       |  26 +++++
 test/routers/carousel.vue                 |   2 +-
 4 files changed, 155 insertions(+), 4 deletions(-)

diff --git a/src/components/carousel/carousel-item.vue b/src/components/carousel/carousel-item.vue
index b995e94b..ea964c6b 100644
--- a/src/components/carousel/carousel-item.vue
+++ b/src/components/carousel/carousel-item.vue
@@ -1,10 +1,26 @@
 <template>
-    <div :class="prefixCls"><slot></slot></div>
+    <div :class="prefixCls" v-bind:style="styles">{{width}}<slot></slot></div>
 </template>
 <script>
     const prefixCls = 'ivu-carousel-item';
 
     export default {
-        name: 'CarouselItem'
+        componentName: 'carousel-item',
+
+        data () {
+            return {
+                prefixCls: prefixCls,
+                width: 0,
+                left: 0
+            };
+        },
+        computed: {
+            styles () {
+                return {
+                    width: `${this.width}px`,
+                    left: `${this.left}px`
+                }
+            }
+        },
     };
 </script>
diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
index 680cd56c..e048061e 100644
--- a/src/components/carousel/carousel.vue
+++ b/src/components/carousel/carousel.vue
@@ -1,10 +1,18 @@
 <template>
     <div :class="classes">
-        <slot></slot>
+        <!-- button -->
+        <div :class="[prefixCls + '-list']">
+            <div :class="[prefixCls + '-track']" :style="trackStyles" v-el:slides>
+                <!-- opacity: 1; width: 4480px; transform: translate3d(-1120px, 0px, 0px); -->
+                <slot></slot>
+            </div>
+        </div>
+        <!-- button -->
     </div>
 </template>
 <script>
     import Icon from '../icon/icon.vue';
+    import { oneOf, getStyle, deepCopy, getScrollBarSize } from '../../utils/assist';
 
     const prefixCls = 'ivu-carousel';
 
@@ -40,6 +48,15 @@
                 default: false
             }
         },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                listWidth: 0,
+                trackWidth: 0,
+                slides: [],
+                slideInstances: []
+            }
+        },
         // events: before-change(from, to), after-change(current, from)
         computed: {
             classes () {
@@ -49,7 +66,99 @@
                         [`${prefixCls}-vertical`]: this.vertical
                     }
                 ];
+            },
+            trackStyles () {
+                return {
+                    width: `${this.trackWidth}px`
+                };
             }
+        },
+        methods: {
+            // find option component
+            findChild (cb) {
+                const find = function (child) {
+                    const name = child.$options.componentName;
+
+                    if (name) {
+                        cb(child);
+                    } else if (child.$children.length) {
+                        child.$children.forEach((innerChild) => {
+                            find(innerChild, cb);
+                        });
+                    }
+                };
+
+                if (this.slideInstances.length) {
+                    this.slideInstances.forEach((child) => {
+                        find(child);
+                    });
+                } else {
+                    this.$children.forEach((child) => {
+                        find(child);
+                    });
+                }
+            },
+            updateSlides (init, slot = false) {
+                let slides = [];
+                let index = 1;
+
+                this.findChild((child) => {
+                    slides.push({
+                        $el: child.$el
+                    });
+                    child.index = index++;
+
+                    if (init) {
+                        this.slideInstances.push(child);
+                    }
+                });
+
+                this.slides = slides;
+
+                // this.updateSlideWidth();
+            },
+            updatePos () {
+                this.findChild((child) => {
+                    child.width = this.listWidth;
+                });
+
+                this.trackWidth = (this.slides.length || 0) * this.listWidth;
+            },
+            // use when slot changed
+            slotChange () {
+                this.slides = [];
+                this.slideInstances = [];
+            },
+            handleResize () {
+                this.$nextTick(() => {
+                    this.listWidth = parseInt(getStyle(this.$el, 'width'));
+                    this.updatePos();
+                });
+            }
+        },
+        compiled () {
+            this.updateSlides(true);
+
+            // watch slot changed
+            if (MutationObserver) {
+                this.observer = new MutationObserver(() => {
+                    this.slotChange();
+                    this.updateSlides(true, true);
+                });
+
+                this.observer.observe(this.$els.slides, {
+                    childList: true,
+                    characterData: true,
+                    subtree: true
+                });
+            }
+        },
+        ready () {
+            this.handleResize();
+            window.addEventListener('resize', this.handleResize, false);
+        },
+        beforeDestroy () {
+            window.removeEventListener('resize', this.handleResize, false);
         }
     };
 </script>
diff --git a/src/styles/components/carousel.less b/src/styles/components/carousel.less
index b4407175..87557dc4 100644
--- a/src/styles/components/carousel.less
+++ b/src/styles/components/carousel.less
@@ -8,4 +8,30 @@
     user-select: none;
     touch-action: pan-y;
     -webkit-tap-highlight-color: transparent;
+
+    &-track, &-list {
+        transform: translate3d(0, 0, 0);
+    }
+
+    &-list {
+        position: relative;
+        display: block;
+        overflow: hidden;
+
+        margin: 0;
+        padding: 0;
+    }
+
+    &-track {
+        position: relative;
+        top: 0;
+        left: 0;
+        display: block;
+    }
+
+    &-item {
+        float: left;
+        height: 100%;
+        min-height: 1px;
+    }
 }
diff --git a/test/routers/carousel.vue b/test/routers/carousel.vue
index 4dff7756..ff9bab67 100644
--- a/test/routers/carousel.vue
+++ b/test/routers/carousel.vue
@@ -1,5 +1,5 @@
 <template>
-    <Carousel>
+    <Carousel style="width: 400px">
         <Carousel-item>test1</Carousel-item>
         <Carousel-item>test2</Carousel-item>
         <Carousel-item>test3</Carousel-item>

From 3e6d63565044ea80edb47fe1f4312e331cf199e9 Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Mon, 16 Jan 2017 04:12:46 -0600
Subject: [PATCH 04/16] implement basic timer

---
 src/components/carousel/carousel.vue | 31 ++++++++++++++++++++++++++--
 src/styles/components/carousel.less  |  3 +++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
index e048061e..458b60ee 100644
--- a/src/components/carousel/carousel.vue
+++ b/src/components/carousel/carousel.vue
@@ -46,6 +46,10 @@
             vertical: {
                 type: Boolean,
                 default: false
+            },
+            currentIndex: {
+                type: Number,
+                default: 0
             }
         },
         data () {
@@ -53,8 +57,10 @@
                 prefixCls: prefixCls,
                 listWidth: 0,
                 trackWidth: 0,
+                trackLeft: 0,
                 slides: [],
-                slideInstances: []
+                slideInstances: [],
+                timer: null
             }
         },
         // events: before-change(from, to), after-change(current, from)
@@ -69,7 +75,9 @@
             },
             trackStyles () {
                 return {
-                    width: `${this.trackWidth}px`
+                    width: `${this.trackWidth}px`,
+                    transform: `translate3d(-${this.trackLeft}px, 0px, 0px)`,
+                    transition: `transform 500ms ${this.easing}`
                 };
             }
         },
@@ -134,6 +142,17 @@
                     this.listWidth = parseInt(getStyle(this.$el, 'width'));
                     this.updatePos();
                 });
+            },
+            setAutoplay () {
+                if (this.autoplay) {
+                    this.timer = window.setInterval(() => {
+                        this.currentIndex ++;
+                        if (this.currentIndex === this.slides.length) this.currentIndex = 0;
+                        this.trackLeft = this.currentIndex * this.listWidth;
+                    }, this.autoplaySpeed);
+                } else {
+                    window.clearInterval(this.timer);
+                }
             }
         },
         compiled () {
@@ -153,6 +172,14 @@
                 });
             }
         },
+        watch: {
+            autoplay () {
+                this.setAutoplay();
+            },
+            current () {
+                this.switch(this.current);
+            }
+        },
         ready () {
             this.handleResize();
             window.addEventListener('resize', this.handleResize, false);
diff --git a/src/styles/components/carousel.less b/src/styles/components/carousel.less
index 87557dc4..a33e20f2 100644
--- a/src/styles/components/carousel.less
+++ b/src/styles/components/carousel.less
@@ -27,11 +27,14 @@
         top: 0;
         left: 0;
         display: block;
+
+        overflow: hidden;
     }
 
     &-item {
         float: left;
         height: 100%;
         min-height: 1px;
+        display: block;
     }
 }

From bfc11079e27d494cdf3528c4c6c7b4fec23e95ad Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Mon, 16 Jan 2017 04:28:34 -0600
Subject: [PATCH 05/16] updated autoplay and wrote tests

---
 src/components/carousel/carousel-item.vue |  2 +-
 src/components/carousel/carousel.vue      | 23 +++++++++-----
 test/routers/carousel.vue                 | 38 +++++++++++++++++++----
 3 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/src/components/carousel/carousel-item.vue b/src/components/carousel/carousel-item.vue
index ea964c6b..9bf04afc 100644
--- a/src/components/carousel/carousel-item.vue
+++ b/src/components/carousel/carousel-item.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="prefixCls" v-bind:style="styles">{{width}}<slot></slot></div>
+    <div :class="prefixCls" v-bind:style="styles"><slot></slot></div>
 </template>
 <script>
     const prefixCls = 'ivu-carousel-item';
diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
index 458b60ee..d409a197 100644
--- a/src/components/carousel/carousel.vue
+++ b/src/components/carousel/carousel.vue
@@ -143,15 +143,18 @@
                     this.updatePos();
                 });
             },
+            slide () {
+                this.trackLeft = this.currentIndex * this.listWidth;
+            },
             setAutoplay () {
+                window.clearInterval(this.timer);
                 if (this.autoplay) {
                     this.timer = window.setInterval(() => {
-                        this.currentIndex ++;
-                        if (this.currentIndex === this.slides.length) this.currentIndex = 0;
-                        this.trackLeft = this.currentIndex * this.listWidth;
+                        let index = this.currentIndex;
+                        index ++;
+                        if (index === this.slides.length) index = 0;
+                        this.currentIndex = index;
                     }, this.autoplaySpeed);
-                } else {
-                    window.clearInterval(this.timer);
                 }
             }
         },
@@ -176,12 +179,18 @@
             autoplay () {
                 this.setAutoplay();
             },
-            current () {
-                this.switch(this.current);
+            autoplaySpeed () {
+                this.setAutoplay();
+            },
+            currentIndex () {
+                this.$nextTick(() => {
+                    this.slide();
+                });
             }
         },
         ready () {
             this.handleResize();
+            this.setAutoplay();
             window.addEventListener('resize', this.handleResize, false);
         },
         beforeDestroy () {
diff --git a/test/routers/carousel.vue b/test/routers/carousel.vue
index ff9bab67..5437fc23 100644
--- a/test/routers/carousel.vue
+++ b/test/routers/carousel.vue
@@ -1,15 +1,41 @@
 <template>
-    <Carousel style="width: 400px">
-        <Carousel-item>test1</Carousel-item>
+    <Row>
+        <i-col span="2">
+            Current Index
+            <p>{{ currentIndex }}</p>
+        </i-col>
+        <i-col span="2">
+            <p>Autoplay</p>
+            <Switch :checked.sync="autoplay" size="small"></Switch>
+        </i-col>
+        <i-col span="4">
+            Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider>
+        </i-col>
+    </Row>
+    <Carousel style="width: 400px"
+        :current-index.sync="currentIndex"
+        :autoplay="autoplay"
+        :autoplay-speed="autoplaySpeed">
+        <Carousel-item>
+            <Alert type="warning" show-icon>
+                警告提示文案
+                <template slot="desc">
+                    警告的提示描述文案警告的提示描述文案警告的提示描述文案
+                </template>
+            </Alert>
+        </Carousel-item>
         <Carousel-item>test2</Carousel-item>
         <Carousel-item>test3</Carousel-item>
     </Carousel>
-
-    <Carousel :vertical="true">
-        <Carousel-item></Carousel-item>
-    </Carousel>
 </template>
 <script>
     export default {
+        data () {
+            return {
+                currentIndex: 0,
+                autoplay: true,
+                autoplaySpeed: 2000
+            }
+        }
     }
 </script>

From 90f77e4060a4bd137d10c86ddfc03d29620d821d Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Mon, 16 Jan 2017 17:37:28 -0600
Subject: [PATCH 06/16] updated carousel style

---
 src/components/carousel/carousel.vue | 17 ++++++------
 src/styles/components/carousel.less  | 40 ++++++++++++++++++++++++++++
 test/routers/carousel.vue            |  9 ++++---
 3 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
index d409a197..d811bef2 100644
--- a/src/components/carousel/carousel.vue
+++ b/src/components/carousel/carousel.vue
@@ -1,13 +1,20 @@
 <template>
     <div :class="classes">
-        <!-- button -->
+        <div :class="[prefixCls + '-arrow', 'left']">
+            <div class='placeholder'></div>
+            <Icon type="arrow-left-b"></Icon>
+        </div>
         <div :class="[prefixCls + '-list']">
             <div :class="[prefixCls + '-track']" :style="trackStyles" v-el:slides>
                 <!-- opacity: 1; width: 4480px; transform: translate3d(-1120px, 0px, 0px); -->
                 <slot></slot>
             </div>
         </div>
-        <!-- button -->
+        <div :class="[prefixCls + '-arrow', 'right']">
+            <div class='placeholder'></div>
+            <Icon type="arrow-right-b"></Icon>
+        </div>
+        <!-- dots -->
     </div>
 </template>
 <script>
@@ -39,10 +46,6 @@
                 type: Boolean,
                 default: true
             },
-            fade: {
-                type: Boolean,
-                default: false
-            },
             vertical: {
                 type: Boolean,
                 default: false
@@ -122,8 +125,6 @@
                 });
 
                 this.slides = slides;
-
-                // this.updateSlideWidth();
             },
             updatePos () {
                 this.findChild((child) => {
diff --git a/src/styles/components/carousel.less b/src/styles/components/carousel.less
index a33e20f2..451654d3 100644
--- a/src/styles/components/carousel.less
+++ b/src/styles/components/carousel.less
@@ -29,6 +29,8 @@
         display: block;
 
         overflow: hidden;
+
+        z-index: 1;
     }
 
     &-item {
@@ -37,4 +39,42 @@
         min-height: 1px;
         display: block;
     }
+
+    &-arrow {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        height: 100%;
+
+        text-align: center;
+
+        & > * {
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        .placeholder{
+            overflow: hidden;
+            width: 0;
+            min-height: inherit;
+            height: inherit;
+        }
+
+        z-index: 3;
+
+        &.left {
+            left: 0;
+        }
+        &.right {
+            right: 0;
+        }
+
+        width: 10%;
+
+        cursor: pointer;
+
+        &:hover {
+            background: fade(#000, 30%);
+        }
+    }
 }
diff --git a/test/routers/carousel.vue b/test/routers/carousel.vue
index 5437fc23..759a6b6d 100644
--- a/test/routers/carousel.vue
+++ b/test/routers/carousel.vue
@@ -12,10 +12,11 @@
             Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider>
         </i-col>
     </Row>
-    <Carousel style="width: 400px"
+    <Carousel style="width: 50%; border: solid 1px #000"
         :current-index.sync="currentIndex"
         :autoplay="autoplay"
-        :autoplay-speed="autoplaySpeed">
+        :autoplay-speed="autoplaySpeed"
+        easing="linear">
         <Carousel-item>
             <Alert type="warning" show-icon>
                 警告提示文案
@@ -24,7 +25,9 @@
                 </template>
             </Alert>
         </Carousel-item>
-        <Carousel-item>test2</Carousel-item>
+        <Carousel-item style="text-align: center">
+            <Icon type="checkmark" style="font-size: 5em"></Icon>
+        </Carousel-item>
         <Carousel-item>test3</Carousel-item>
     </Carousel>
 </template>

From 77d460e8c4ef808fd612187ebf06957a249177cc Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Mon, 16 Jan 2017 17:43:20 -0600
Subject: [PATCH 07/16] added offset function

---
 src/components/carousel/carousel.vue | 15 +++++++++------
 test/routers/carousel.vue            |  8 ++++++++
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
index d811bef2..6cc43313 100644
--- a/src/components/carousel/carousel.vue
+++ b/src/components/carousel/carousel.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="classes">
-        <div :class="[prefixCls + '-arrow', 'left']">
+        <div :class="[prefixCls + '-arrow', 'left']" @click="add(-1)">
             <div class='placeholder'></div>
             <Icon type="arrow-left-b"></Icon>
         </div>
@@ -10,7 +10,7 @@
                 <slot></slot>
             </div>
         </div>
-        <div :class="[prefixCls + '-arrow', 'right']">
+        <div :class="[prefixCls + '-arrow', 'right']" @click="add(1)">
             <div class='placeholder'></div>
             <Icon type="arrow-right-b"></Icon>
         </div>
@@ -144,6 +144,12 @@
                     this.updatePos();
                 });
             },
+            add (offset) {
+                let index = this.currentIndex;
+                index += offset;
+                if (index === this.slides.length) index = 0;
+                this.currentIndex = index;
+            },
             slide () {
                 this.trackLeft = this.currentIndex * this.listWidth;
             },
@@ -151,10 +157,7 @@
                 window.clearInterval(this.timer);
                 if (this.autoplay) {
                     this.timer = window.setInterval(() => {
-                        let index = this.currentIndex;
-                        index ++;
-                        if (index === this.slides.length) index = 0;
-                        this.currentIndex = index;
+                        this.add(1);
                     }, this.autoplaySpeed);
                 }
             }
diff --git a/test/routers/carousel.vue b/test/routers/carousel.vue
index 759a6b6d..b6f9ee8b 100644
--- a/test/routers/carousel.vue
+++ b/test/routers/carousel.vue
@@ -11,6 +11,14 @@
         <i-col span="4">
             Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider>
         </i-col>
+        <i-col span="4">
+            Switch To
+            <Button-group>
+                <i-button @click="currentIndex = 0">0</i-button>
+                <i-button @click="currentIndex = 1">1</i-button>
+                <i-button @click="currentIndex = 2">2</i-button>
+            </Button-group>
+        </i-col>
     </Row>
     <Carousel style="width: 50%; border: solid 1px #000"
         :current-index.sync="currentIndex"

From 5e8be9b390e88ec056c41ecfcbf8cf6b71e4b1f4 Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Mon, 16 Jan 2017 17:51:03 -0600
Subject: [PATCH 08/16] fixed add bug. added push test

---
 src/components/carousel/carousel.vue |  3 ++-
 test/routers/carousel.vue            | 14 +++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
index 6cc43313..dd7fd602 100644
--- a/src/components/carousel/carousel.vue
+++ b/src/components/carousel/carousel.vue
@@ -147,7 +147,8 @@
             add (offset) {
                 let index = this.currentIndex;
                 index += offset;
-                if (index === this.slides.length) index = 0;
+                while (index < 0) index += this.slides.length;
+                index = index % this.slides.length;
                 this.currentIndex = index;
             },
             slide () {
diff --git a/test/routers/carousel.vue b/test/routers/carousel.vue
index b6f9ee8b..a73652f0 100644
--- a/test/routers/carousel.vue
+++ b/test/routers/carousel.vue
@@ -19,6 +19,9 @@
                 <i-button @click="currentIndex = 2">2</i-button>
             </Button-group>
         </i-col>
+        <i-col span="4">
+            <i-button @click="push">Push</i-button>
+        </i-col>
     </Row>
     <Carousel style="width: 50%; border: solid 1px #000"
         :current-index.sync="currentIndex"
@@ -37,6 +40,9 @@
             <Icon type="checkmark" style="font-size: 5em"></Icon>
         </Carousel-item>
         <Carousel-item>test3</Carousel-item>
+        <Carousel-item v-for="item in pushItem" track-by="$index">
+            <Icon type="checkmark" style="font-size: 5em"></Icon>{{item}}
+        </Carousel-item>
     </Carousel>
 </template>
 <script>
@@ -45,7 +51,13 @@
             return {
                 currentIndex: 0,
                 autoplay: true,
-                autoplaySpeed: 2000
+                autoplaySpeed: 2000,
+                pushItem: []
+            }
+        },
+        methods: {
+            push () {
+                this.pushItem.push('test');
             }
         }
     }

From 8f4e2cf0c3cf675ac3748783203424f18994dbb9 Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Mon, 16 Jan 2017 18:02:51 -0600
Subject: [PATCH 09/16] update pos when slot changes. added remove test

---
 src/components/carousel/carousel-item.vue | 5 +++++
 src/components/carousel/carousel.vue      | 2 ++
 test/routers/carousel.vue                 | 4 +++-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/carousel/carousel-item.vue b/src/components/carousel/carousel-item.vue
index 9bf04afc..929ffb0d 100644
--- a/src/components/carousel/carousel-item.vue
+++ b/src/components/carousel/carousel-item.vue
@@ -22,5 +22,10 @@
                 }
             }
         },
+        compiled () {
+            // this.$parent.slotChange();
+            // this.$parent.updateSlides(true, true);
+            // this.$parent.updatePos();
+        }
     };
 </script>
diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
index dd7fd602..b4ce57e3 100644
--- a/src/components/carousel/carousel.vue
+++ b/src/components/carousel/carousel.vue
@@ -125,6 +125,8 @@
                 });
 
                 this.slides = slides;
+
+                this.updatePos();
             },
             updatePos () {
                 this.findChild((child) => {
diff --git a/test/routers/carousel.vue b/test/routers/carousel.vue
index a73652f0..2cbcb5cd 100644
--- a/test/routers/carousel.vue
+++ b/test/routers/carousel.vue
@@ -21,6 +21,7 @@
         </i-col>
         <i-col span="4">
             <i-button @click="push">Push</i-button>
+            <i-button @click="remove = true">Remove</i-button>
         </i-col>
     </Row>
     <Carousel style="width: 50%; border: solid 1px #000"
@@ -28,7 +29,7 @@
         :autoplay="autoplay"
         :autoplay-speed="autoplaySpeed"
         easing="linear">
-        <Carousel-item>
+        <Carousel-item v-if="!remove">
             <Alert type="warning" show-icon>
                 警告提示文案
                 <template slot="desc">
@@ -52,6 +53,7 @@
                 currentIndex: 0,
                 autoplay: true,
                 autoplaySpeed: 2000,
+                remove: false,
                 pushItem: []
             }
         },

From 373dfb3cad8fcffcea3c71b6b67f9575f1e1f511 Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Mon, 16 Jan 2017 18:10:31 -0600
Subject: [PATCH 10/16] removed observer

---
 src/components/carousel/carousel-item.vue |  7 ++++---
 src/components/carousel/carousel.vue      | 23 +++++++----------------
 2 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/src/components/carousel/carousel-item.vue b/src/components/carousel/carousel-item.vue
index 929ffb0d..e60a50e7 100644
--- a/src/components/carousel/carousel-item.vue
+++ b/src/components/carousel/carousel-item.vue
@@ -23,9 +23,10 @@
             }
         },
         compiled () {
-            // this.$parent.slotChange();
-            // this.$parent.updateSlides(true, true);
-            // this.$parent.updatePos();
+            this.$parent.slotChange();
+        },
+        beforeDestroy () {
+            this.$parent.slotChange();
         }
     };
 </script>
diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
index b4ce57e3..28855459 100644
--- a/src/components/carousel/carousel.vue
+++ b/src/components/carousel/carousel.vue
@@ -137,8 +137,13 @@
             },
             // use when slot changed
             slotChange () {
-                this.slides = [];
-                this.slideInstances = [];
+                this.$nextTick(() => {
+                    this.slides = [];
+                    this.slideInstances = [];
+
+                    this.updateSlides(true, true);
+                    this.updatePos();
+                });
             },
             handleResize () {
                 this.$nextTick(() => {
@@ -167,20 +172,6 @@
         },
         compiled () {
             this.updateSlides(true);
-
-            // watch slot changed
-            if (MutationObserver) {
-                this.observer = new MutationObserver(() => {
-                    this.slotChange();
-                    this.updateSlides(true, true);
-                });
-
-                this.observer.observe(this.$els.slides, {
-                    childList: true,
-                    characterData: true,
-                    subtree: true
-                });
-            }
         },
         watch: {
             autoplay () {

From e9989f2b8527ae389b943db2c88675c92d98a5b6 Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Tue, 17 Jan 2017 14:29:51 -0600
Subject: [PATCH 11/16] added horizontal dots

---
 src/components/carousel/carousel.vue |  66 +++++++++----
 src/styles/components/carousel.less  | 137 +++++++++++++++++++++------
 test/routers/carousel.vue            |  33 ++++++-
 3 files changed, 189 insertions(+), 47 deletions(-)

diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
index 28855459..a219d43d 100644
--- a/src/components/carousel/carousel.vue
+++ b/src/components/carousel/carousel.vue
@@ -1,20 +1,26 @@
 <template>
     <div :class="classes">
-        <div :class="[prefixCls + '-arrow', 'left']" @click="add(-1)">
-            <div class='placeholder'></div>
-            <Icon type="arrow-left-b"></Icon>
-        </div>
+        <button :class="arrowClasses" class="left" @click="add(-1)">
+            <Icon type="chevron-left"></Icon>
+        </button>
         <div :class="[prefixCls + '-list']">
             <div :class="[prefixCls + '-track']" :style="trackStyles" v-el:slides>
                 <!-- opacity: 1; width: 4480px; transform: translate3d(-1120px, 0px, 0px); -->
                 <slot></slot>
             </div>
         </div>
-        <div :class="[prefixCls + '-arrow', 'right']" @click="add(1)">
-            <div class='placeholder'></div>
-            <Icon type="arrow-right-b"></Icon>
-        </div>
-        <!-- dots -->
+        <button :class="arrowClasses" class="right" @click="add(1)">
+            <Icon type="chevron-right"></Icon>
+        </button>
+        <ul :class="dotsClasses">
+            <template v-for="n in slides.length">
+                <li :class="{ [`${prefixCls}-active`]: n === currentIndex }"
+                    @click="dotsEvent('click', n)"
+                    @mouseover="dotsEvent('hover', n)">
+                    <button></button>
+                </li>
+            </template>
+        </ul>
     </div>
 </template>
 <script>
@@ -26,9 +32,9 @@
     export default {
         name: 'Carousel',
         props: {
-            arrows: {
-                type: Boolean,
-                default: false
+            arrow: {
+                type: String,
+                default: 'hover'
             },
             autoplay: {
                 type: Boolean,
@@ -43,8 +49,12 @@
                 default: 'ease'
             },
             dots: {
-                type: Boolean,
-                default: true
+                type: String,
+                default: 'inside'
+            },
+            trigger: {
+                type: String,
+                default: 'click'
             },
             vertical: {
                 type: Boolean,
@@ -66,7 +76,6 @@
                 timer: null
             }
         },
-        // events: before-change(from, to), after-change(current, from)
         computed: {
             classes () {
                 return [
@@ -82,6 +91,23 @@
                     transform: `translate3d(-${this.trackLeft}px, 0px, 0px)`,
                     transition: `transform 500ms ${this.easing}`
                 };
+            },
+            arrowClasses () {
+                return [
+                    `${prefixCls}-arrow`,
+                    `${prefixCls}-arrow-${this.arrow}`
+                ]
+            },
+            dotsClasses () {
+                return [
+                    `${prefixCls}-dots`,
+                    `${prefixCls}-arrow-${this.dots}`
+                ]
+            },
+            activeDot (n) {
+                return {
+                    [`${prefixCls}-vertical`]: this.currentIndex === n
+                }
             }
         },
         methods: {
@@ -156,10 +182,14 @@
                 index += offset;
                 while (index < 0) index += this.slides.length;
                 index = index % this.slides.length;
+                this.$emit('on-change', this.currentIndex, index);
                 this.currentIndex = index;
             },
-            slide () {
-                this.trackLeft = this.currentIndex * this.listWidth;
+            dotsEvent (event, n) {
+                if (event === this.trigger) {
+                    this.$emit('on-change', this.currentIndex, n);
+                    this.currentIndex = n;
+                }
             },
             setAutoplay () {
                 window.clearInterval(this.timer);
@@ -182,7 +212,7 @@
             },
             currentIndex () {
                 this.$nextTick(() => {
-                    this.slide();
+                    this.trackLeft = this.currentIndex * this.listWidth;
                 });
             }
         },
diff --git a/src/styles/components/carousel.less b/src/styles/components/carousel.less
index 451654d3..6cef9b33 100644
--- a/src/styles/components/carousel.less
+++ b/src/styles/components/carousel.less
@@ -41,40 +41,123 @@
     }
 
     &-arrow {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        height: 100%;
 
-        text-align: center;
+        border: none;
+        outline: none;
 
-        & > * {
-            display: inline-block;
-            vertical-align: middle;
-        }
+        padding: 0;
+        margin: 0;
 
-        .placeholder{
-            overflow: hidden;
-            width: 0;
-            min-height: inherit;
-            height: inherit;
-        }
-
-        z-index: 3;
-
-        &.left {
-            left: 0;
-        }
-        &.right {
-            right: 0;
-        }
-
-        width: 10%;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
 
         cursor: pointer;
 
+        display: none;
+
+        position: absolute;
+        top: 50%;
+        z-index: 10;
+        transform: translateY(-50%);
+
+        transition: .3s;
+        background-color: rgba(31, 45, 61, .11);
+        color: #fff;
+
         &:hover {
-            background: fade(#000, 30%);
+            background-color: rgba(31, 45, 61, 0.5);
+        }
+
+        text-align: center;
+        font-size: 1em;
+
+        font-family: inherit;
+        line-height: inherit;
+
+        & > * {
+            vertical-align: baseline;
+        }
+
+        &.left {
+            left: 16px;
+        }
+
+        &.right {
+            right: 16px;
+        }
+
+        &-always {
+            display: inherit;
+        }
+
+        &-hover {
+            display: inherit;
+
+            opacity: 0;
+        }
+    }
+
+    &:hover &-arrow-hover {
+        opacity: 1;
+    }
+
+    &-dots {
+        @padding: 7px;
+
+        position: absolute;
+        bottom: 10px - @padding;
+
+        list-style: none;
+        display: block;
+
+        text-align: center;
+
+        padding: 0;
+        width: 100%;
+        height: 3px + @padding * 2;
+
+        li {
+            position: relative;
+            display: inline-block;
+
+            vertical-align: top;
+            text-align: center;
+
+            margin: 0 2px;
+            padding: @padding 0;
+
+            cursor: pointer;
+
+            button {
+                border: 0;
+                cursor: pointer;
+
+                background: #8391a5;
+                opacity: 0.3;
+
+                display: block;
+                width: 16px;
+                height: 3px;
+
+                border-radius: 1px;
+                outline: none;
+
+                font-size: 0;
+                color: transparent;
+
+                -webkit-transition: all .5s;
+                transition: all .5s;
+            }
+
+            &:hover > button {
+                opacity: 0.7;
+            }
+
+            &.@{carousel-prefix-cls}-active > button {
+                opacity: 1;
+                width: 24px;
+            }
         }
     }
 }
diff --git a/test/routers/carousel.vue b/test/routers/carousel.vue
index 2cbcb5cd..8d43584f 100644
--- a/test/routers/carousel.vue
+++ b/test/routers/carousel.vue
@@ -21,13 +21,39 @@
         </i-col>
         <i-col span="4">
             <i-button @click="push">Push</i-button>
-            <i-button @click="remove = true">Remove</i-button>
+            <i-button @click="remove = true">Remove Front</i-button>
+        </i-col>
+        <i-col span="4">
+            <p>Dots</p>
+            <Button-group>
+                <i-button @click="dots = 'inside'">Inside</i-button>
+                <i-button @click="dots = 'outside'">Outside</i-button>
+                <i-button @click="dots = 'none'">None</i-button>
+            </Button-group>
+        </i-col>
+        <i-col span="4">
+            <p>Trigger</p>
+            <Button-group>
+                <i-button @click="trigger = 'click'">Click</i-button>
+                <i-button @click="trigger = 'hover'">Hover</i-button>
+            </Button-group>
+        </i-col>
+        <i-col span="4">
+            Arrow
+            <Button-group>
+                <i-button @click="arrow = 'hover'">Hover</i-button>
+                <i-button @click="arrow = 'always'">Always</i-button>
+                <i-button @click="arrow = 'never'">Never</i-button>
+            </Button-group>
         </i-col>
     </Row>
     <Carousel style="width: 50%; border: solid 1px #000"
         :current-index.sync="currentIndex"
         :autoplay="autoplay"
         :autoplay-speed="autoplaySpeed"
+        :dots="dots"
+        :trigger="trigger"
+        :arrow="arrow"
         easing="linear">
         <Carousel-item v-if="!remove">
             <Alert type="warning" show-icon>
@@ -54,7 +80,10 @@
                 autoplay: true,
                 autoplaySpeed: 2000,
                 remove: false,
-                pushItem: []
+                pushItem: [],
+                arrow: 'hover',
+                trigger: 'click',
+                dots: 'inside'
             }
         },
         methods: {

From c1af3facb0c8af179ae06bcf17a824a90c63b66e Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Tue, 17 Jan 2017 14:35:23 -0600
Subject: [PATCH 12/16] added on-change event emitter

---
 src/components/carousel/carousel.vue |  5 +++--
 test/routers/carousel.vue            | 10 +++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
index a219d43d..4ab1ad92 100644
--- a/src/components/carousel/carousel.vue
+++ b/src/components/carousel/carousel.vue
@@ -186,7 +186,7 @@
                 this.currentIndex = index;
             },
             dotsEvent (event, n) {
-                if (event === this.trigger) {
+                if (event === this.trigger && this.currentIndex !== n) {
                     this.$emit('on-change', this.currentIndex, n);
                     this.currentIndex = n;
                 }
@@ -210,7 +210,8 @@
             autoplaySpeed () {
                 this.setAutoplay();
             },
-            currentIndex () {
+            currentIndex (val, oldVal) {
+                this.$emit('on-change', oldVal, val);
                 this.$nextTick(() => {
                     this.trackLeft = this.currentIndex * this.listWidth;
                 });
diff --git a/test/routers/carousel.vue b/test/routers/carousel.vue
index 8d43584f..20e3ad46 100644
--- a/test/routers/carousel.vue
+++ b/test/routers/carousel.vue
@@ -54,6 +54,7 @@
         :dots="dots"
         :trigger="trigger"
         :arrow="arrow"
+        @on-change="slideChange"
         easing="linear">
         <Carousel-item v-if="!remove">
             <Alert type="warning" show-icon>
@@ -71,6 +72,9 @@
             <Icon type="checkmark" style="font-size: 5em"></Icon>{{item}}
         </Carousel-item>
     </Carousel>
+    <div>
+        <p v-for="item in log">{{item}}</p>
+    </div>
 </template>
 <script>
     export default {
@@ -83,12 +87,16 @@
                 pushItem: [],
                 arrow: 'hover',
                 trigger: 'click',
-                dots: 'inside'
+                dots: 'inside',
+                log: []
             }
         },
         methods: {
             push () {
                 this.pushItem.push('test');
+            },
+            slideChange (from, to) {
+                this.log.push(`From ${from} To ${to}`);
             }
         }
     }

From 8738f4d30456c6074f2d89d5e3ffa13a61045939 Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Tue, 17 Jan 2017 14:39:17 -0600
Subject: [PATCH 13/16] added outside dots

---
 src/components/carousel/carousel.vue |  2 +-
 src/styles/components/carousel.less  | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
index 4ab1ad92..55d19442 100644
--- a/src/components/carousel/carousel.vue
+++ b/src/components/carousel/carousel.vue
@@ -101,7 +101,7 @@
             dotsClasses () {
                 return [
                     `${prefixCls}-dots`,
-                    `${prefixCls}-arrow-${this.dots}`
+                    `${prefixCls}-dots-${this.dots}`
                 ]
             },
             activeDot (n) {
diff --git a/src/styles/components/carousel.less b/src/styles/components/carousel.less
index 6cef9b33..fda1001c 100644
--- a/src/styles/components/carousel.less
+++ b/src/styles/components/carousel.less
@@ -105,11 +105,22 @@
     &-dots {
         @padding: 7px;
 
-        position: absolute;
-        bottom: 10px - @padding;
+        position: relative;
+        &-inside {
+            position: absolute;
+            bottom: 10px - @padding;
+        }
+
+        &-outside {
+            margin-top: 10px - @padding;
+        }
+
+        display: block;
+        &-none {
+            display: none;
+        }
 
         list-style: none;
-        display: block;
 
         text-align: center;
 

From 9cd69375d84f39ba18532ec99153ef311c065a06 Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Tue, 17 Jan 2017 16:39:07 -0600
Subject: [PATCH 14/16] added height props

---
 src/components/carousel/carousel-item.vue |  2 +
 src/components/carousel/carousel.vue      | 49 +++++++++++------------
 src/styles/components/carousel.less       | 11 ++---
 test/routers/carousel.vue                 | 19 ++++++++-
 4 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/src/components/carousel/carousel-item.vue b/src/components/carousel/carousel-item.vue
index e60a50e7..c0092d9c 100644
--- a/src/components/carousel/carousel-item.vue
+++ b/src/components/carousel/carousel-item.vue
@@ -11,6 +11,7 @@
             return {
                 prefixCls: prefixCls,
                 width: 0,
+                height: 'auto',
                 left: 0
             };
         },
@@ -18,6 +19,7 @@
             styles () {
                 return {
                     width: `${this.width}px`,
+                    height: `${this.height}`,
                     left: `${this.left}px`
                 }
             }
diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
index 55d19442..17d383b0 100644
--- a/src/components/carousel/carousel.vue
+++ b/src/components/carousel/carousel.vue
@@ -5,7 +5,6 @@
         </button>
         <div :class="[prefixCls + '-list']">
             <div :class="[prefixCls + '-track']" :style="trackStyles" v-el:slides>
-                <!-- opacity: 1; width: 4480px; transform: translate3d(-1120px, 0px, 0px); -->
                 <slot></slot>
             </div>
         </div>
@@ -56,13 +55,13 @@
                 type: String,
                 default: 'click'
             },
-            vertical: {
-                type: Boolean,
-                default: false
-            },
             currentIndex: {
                 type: Number,
                 default: 0
+            },
+            height: {
+                type: [String, Number],
+                default: 'auto'
             }
         },
         data () {
@@ -70,25 +69,23 @@
                 prefixCls: prefixCls,
                 listWidth: 0,
                 trackWidth: 0,
-                trackLeft: 0,
+                trackOffset: 0,
                 slides: [],
                 slideInstances: [],
-                timer: null
+                timer: null,
+                ready: false
             }
         },
         computed: {
             classes () {
                 return [
-                    `${prefixCls}`,
-                    {
-                        [`${prefixCls}-vertical`]: this.vertical
-                    }
+                    `${prefixCls}`
                 ];
             },
             trackStyles () {
                 return {
                     width: `${this.trackWidth}px`,
-                    transform: `translate3d(-${this.trackLeft}px, 0px, 0px)`,
+                    transform: `translate3d(-${this.trackOffset}px, 0px, 0px)`,
                     transition: `transform 500ms ${this.easing}`
                 };
             },
@@ -103,11 +100,6 @@
                     `${prefixCls}-dots`,
                     `${prefixCls}-dots-${this.dots}`
                 ]
-            },
-            activeDot (n) {
-                return {
-                    [`${prefixCls}-vertical`]: this.currentIndex === n
-                }
             }
         },
         methods: {
@@ -125,7 +117,7 @@
                     }
                 };
 
-                if (this.slideInstances.length) {
+                if (this.slideInstances.length || !this.$children) {
                     this.slideInstances.forEach((child) => {
                         find(child);
                     });
@@ -157,6 +149,7 @@
             updatePos () {
                 this.findChild((child) => {
                     child.width = this.listWidth;
+                    child.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
                 });
 
                 this.trackWidth = (this.slides.length || 0) * this.listWidth;
@@ -172,10 +165,8 @@
                 });
             },
             handleResize () {
-                this.$nextTick(() => {
-                    this.listWidth = parseInt(getStyle(this.$el, 'width'));
-                    this.updatePos();
-                });
+                this.listWidth = parseInt(getStyle(this.$el, 'width'));
+                this.updatePos();
             },
             add (offset) {
                 let index = this.currentIndex;
@@ -198,6 +189,12 @@
                         this.add(1);
                     }, this.autoplaySpeed);
                 }
+            },
+            updateOffset () {
+                this.$nextTick(() => {
+                    this.handleResize();
+                    this.trackOffset = this.currentIndex * this.listWidth;
+                });
             }
         },
         compiled () {
@@ -211,10 +208,10 @@
                 this.setAutoplay();
             },
             currentIndex (val, oldVal) {
-                this.$emit('on-change', oldVal, val);
-                this.$nextTick(() => {
-                    this.trackLeft = this.currentIndex * this.listWidth;
-                });
+                this.updateOffset();
+            },
+            height () {
+                this.updatePos();
             }
         },
         ready () {
diff --git a/src/styles/components/carousel.less b/src/styles/components/carousel.less
index fda1001c..066f12f6 100644
--- a/src/styles/components/carousel.less
+++ b/src/styles/components/carousel.less
@@ -103,23 +103,24 @@
     }
 
     &-dots {
+        z-index: 10;
+
         @padding: 7px;
 
+        display: none;
+
         position: relative;
         &-inside {
+            display: block;
             position: absolute;
             bottom: 10px - @padding;
         }
 
         &-outside {
+            display: block;
             margin-top: 10px - @padding;
         }
 
-        display: block;
-        &-none {
-            display: none;
-        }
-
         list-style: none;
 
         text-align: center;
diff --git a/test/routers/carousel.vue b/test/routers/carousel.vue
index 20e3ad46..82a45d49 100644
--- a/test/routers/carousel.vue
+++ b/test/routers/carousel.vue
@@ -23,6 +23,8 @@
             <i-button @click="push">Push</i-button>
             <i-button @click="remove = true">Remove Front</i-button>
         </i-col>
+    </Row>
+    <Row>
         <i-col span="4">
             <p>Dots</p>
             <Button-group>
@@ -46,14 +48,21 @@
                 <i-button @click="arrow = 'never'">Never</i-button>
             </Button-group>
         </i-col>
+        <i-col span="4">
+            Height
+            <i-button @click="height = 'auto'">Auto</i-button>
+            <i-button @click="height = 80">Manual</i-button>
+            <Slider v-if="height !== 'auto'" :value.sync="height" :min="50" :max="200"></Slider>
+        </i-col>
     </Row>
-    <Carousel style="width: 50%; border: solid 1px #000"
+    <Carousel style="width: 50%; border: solid 1px #000; margin-top: 20px;"
         :current-index.sync="currentIndex"
         :autoplay="autoplay"
         :autoplay-speed="autoplaySpeed"
         :dots="dots"
         :trigger="trigger"
         :arrow="arrow"
+        :height="height"
         @on-change="slideChange"
         easing="linear">
         <Carousel-item v-if="!remove">
@@ -64,6 +73,11 @@
                 </template>
             </Alert>
         </Carousel-item>
+        <Carousel-item>
+            <div style="height: 100%; min-height: 20px; background: #f50; position: relative;">
+                <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>
+            </div>
+        </Carousel-item>
         <Carousel-item style="text-align: center">
             <Icon type="checkmark" style="font-size: 5em"></Icon>
         </Carousel-item>
@@ -73,7 +87,7 @@
         </Carousel-item>
     </Carousel>
     <div>
-        <p v-for="item in log">{{item}}</p>
+        <p v-for="item in log" track-by="$index">{{item}}</p>
     </div>
 </template>
 <script>
@@ -88,6 +102,7 @@
                 arrow: 'hover',
                 trigger: 'click',
                 dots: 'inside',
+                height: 'auto',
                 log: []
             }
         },

From 2171f454fd706610ab7b671e6e3731a0760a2472 Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Tue, 17 Jan 2017 16:44:50 -0600
Subject: [PATCH 15/16] added many test

---
 test/routers/carousel.vue | 92 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 90 insertions(+), 2 deletions(-)

diff --git a/test/routers/carousel.vue b/test/routers/carousel.vue
index 82a45d49..0171d80c 100644
--- a/test/routers/carousel.vue
+++ b/test/routers/carousel.vue
@@ -74,10 +74,30 @@
             </Alert>
         </Carousel-item>
         <Carousel-item>
-            <div style="height: 100%; min-height: 20px; background: #f50; position: relative;">
+            <div style="height: 150px; background: #f50; position: relative">
                 <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>
             </div>
         </Carousel-item>
+        <Carousel-item>
+            <div style="height: 100%; min-height: 20px; background: #f50; position: relative;">
+                <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 居中测试</p>
+            </div>
+        </Carousel-item>
+        <Carousel-item>
+            <Card style="width:350px">
+                <p slot="title">
+                    <Icon type="ios-film-outline"></Icon>
+                    经典电影
+                </p>
+                <a href="#" slot="extra">
+                    <Icon type="ios-loop-strong"></Icon>
+                    换一换
+                </a>
+                <ul>
+
+                </ul>
+            </Card>
+        </Carousel-item>
         <Carousel-item style="text-align: center">
             <Icon type="checkmark" style="font-size: 5em"></Icon>
         </Carousel-item>
@@ -86,9 +106,77 @@
             <Icon type="checkmark" style="font-size: 5em"></Icon>{{item}}
         </Carousel-item>
     </Carousel>
-    <div>
+    <div style="max-height: 200px; overflow: scroll">
         <p v-for="item in log" track-by="$index">{{item}}</p>
     </div>
+
+    <Card style="width:350px">
+        <p slot="title">
+            <Icon type="ios-film-outline"></Icon>
+            经典电影
+        </p>
+        <Carousel>
+            <Carousel-item v-if="!remove">
+                <Alert type="warning" show-icon>
+                    警告提示文案
+                    <template slot="desc">
+                        警告的提示描述文案警告的提示描述文案警告的提示描述文案
+                    </template>
+                </Alert>
+            </Carousel-item>
+            <Carousel-item>
+                <div style="height: 100%; min-height: 20px; background: #f50; position: relative;">
+                    <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>
+                </div>
+            </Carousel-item>
+            <Carousel-item style="text-align: center">
+                <Icon type="checkmark" style="font-size: 5em"></Icon>
+            </Carousel-item>
+        </Carousel>
+    </Card>
+    <Tabs>
+        <Tab-pane label="标签一">
+            <Carousel>
+                <Carousel-item v-if="!remove">
+                    <Alert type="warning" show-icon>
+                        警告提示文案
+                        <template slot="desc">
+                            警告的提示描述文案警告的提示描述文案警告的提示描述文案
+                        </template>
+                    </Alert>
+                </Carousel-item>
+                <Carousel-item>
+                    <div style="height: 100%; min-height: 20px; background: #f50; position: relative;">
+                        <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>
+                    </div>
+                </Carousel-item>
+                <Carousel-item style="text-align: center">
+                    <Icon type="checkmark" style="font-size: 5em"></Icon>
+                </Carousel-item>
+            </Carousel>
+        </Tab-pane>
+        <Tab-pane label="标签二" disabled>标签二的内容</Tab-pane>
+        <Tab-pane label="标签三">
+            <Carousel>
+                <Carousel-item v-if="!remove">
+                    <Alert type="warning" show-icon>
+                        警告提示文案
+                        <template slot="desc">
+                            警告的提示描述文案警告的提示描述文案警告的提示描述文案
+                        </template>
+                    </Alert>
+                </Carousel-item>
+                <Carousel-item>
+                    <div style="height: 100%; min-height: 20px; background: #f50; position: relative;">
+                        <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>
+                    </div>
+                </Carousel-item>
+                <Carousel-item style="text-align: center">
+                    <Icon type="checkmark" style="font-size: 5em"></Icon>
+                </Carousel-item>
+            </Carousel>
+        </Tab-pane>
+    </Tabs>
 </template>
 <script>
     export default {

From 53e38f9c62e6c54d555bdf8dd591aafe9a93f079 Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Tue, 17 Jan 2017 20:03:49 -0600
Subject: [PATCH 16/16] added prop validators

---
 src/components/carousel/carousel.vue | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
index 6902205f..dbd4560a 100644
--- a/src/components/carousel/carousel.vue
+++ b/src/components/carousel/carousel.vue
@@ -24,7 +24,7 @@
 </template>
 <script>
     import Icon from '../icon/icon.vue';
-    import { getStyle } from '../../utils/assist';
+    import { getStyle, oneOf } from '../../utils/assist';
 
     const prefixCls = 'ivu-carousel';
 
@@ -34,7 +34,10 @@
         props: {
             arrow: {
                 type: String,
-                default: 'hover'
+                default: 'hover',
+                validator (value) {
+                    return oneOf(value, ['hover', 'always', 'never']);
+                }
             },
             autoplay: {
                 type: Boolean,
@@ -50,11 +53,17 @@
             },
             dots: {
                 type: String,
-                default: 'inside'
+                default: 'inside',
+                validator (value) {
+                    return oneOf(value, ['inside', 'outside', 'none']);
+                }
             },
             trigger: {
                 type: String,
-                default: 'click'
+                default: 'click',
+                validator (value) {
+                    return oneOf(value, ['click', 'hover']);
+                }
             },
             currentIndex: {
                 type: Number,
@@ -62,7 +71,10 @@
             },
             height: {
                 type: [String, Number],
-                default: 'auto'
+                default: 'auto',
+                validator (value) {
+                    return value === 'auto' || toString.call(value) === '[object Number]';
+                }
             }
         },
         data () {