diff --git a/src/components/carousel/carousel-item.vue b/src/components/carousel/carousel-item.vue
new file mode 100644
index 00000000..7381afc4
--- /dev/null
+++ b/src/components/carousel/carousel-item.vue
@@ -0,0 +1,34 @@
+<template>
+    <div :class="prefixCls" v-bind:style="styles"><slot></slot></div>
+</template>
+<script>
+    const prefixCls = 'ivu-carousel-item';
+
+    export default {
+        componentName: 'carousel-item',
+
+        data () {
+            return {
+                prefixCls: prefixCls,
+                width: 0,
+                height: 'auto',
+                left: 0
+            };
+        },
+        computed: {
+            styles () {
+                return {
+                    width: `${this.width}px`,
+                    height: `${this.height}`,
+                    left: `${this.left}px`
+                };
+            }
+        },
+        compiled () {
+            this.$parent.slotChange();
+        },
+        beforeDestroy () {
+            this.$parent.slotChange();
+        }
+    };
+</script>
diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
new file mode 100644
index 00000000..dbd4560a
--- /dev/null
+++ b/src/components/carousel/carousel.vue
@@ -0,0 +1,238 @@
+<template>
+    <div :class="classes">
+        <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>
+                <slot></slot>
+            </div>
+        </div>
+        <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>
+    import Icon from '../icon/icon.vue';
+    import { getStyle, oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-carousel';
+
+    export default {
+        name: 'Carousel',
+        components: { Icon },
+        props: {
+            arrow: {
+                type: String,
+                default: 'hover',
+                validator (value) {
+                    return oneOf(value, ['hover', 'always', 'never']);
+                }
+            },
+            autoplay: {
+                type: Boolean,
+                default: true
+            },
+            autoplaySpeed: {
+                type: Number,
+                default: 2000
+            },
+            easing: {
+                type: String,
+                default: 'ease'
+            },
+            dots: {
+                type: String,
+                default: 'inside',
+                validator (value) {
+                    return oneOf(value, ['inside', 'outside', 'none']);
+                }
+            },
+            trigger: {
+                type: String,
+                default: 'click',
+                validator (value) {
+                    return oneOf(value, ['click', 'hover']);
+                }
+            },
+            currentIndex: {
+                type: Number,
+                default: 0
+            },
+            height: {
+                type: [String, Number],
+                default: 'auto',
+                validator (value) {
+                    return value === 'auto' || toString.call(value) === '[object Number]';
+                }
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                listWidth: 0,
+                trackWidth: 0,
+                trackOffset: 0,
+                slides: [],
+                slideInstances: [],
+                timer: null,
+                ready: false
+            };
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`
+                ];
+            },
+            trackStyles () {
+                return {
+                    width: `${this.trackWidth}px`,
+                    transform: `translate3d(-${this.trackOffset}px, 0px, 0px)`,
+                    transition: `transform 500ms ${this.easing}`
+                };
+            },
+            arrowClasses () {
+                return [
+                    `${prefixCls}-arrow`,
+                    `${prefixCls}-arrow-${this.arrow}`
+                ];
+            },
+            dotsClasses () {
+                return [
+                    `${prefixCls}-dots`,
+                    `${prefixCls}-dots-${this.dots}`
+                ];
+            }
+        },
+        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.$children) {
+                    this.slideInstances.forEach((child) => {
+                        find(child);
+                    });
+                } else {
+                    this.$children.forEach((child) => {
+                        find(child);
+                    });
+                }
+            },
+            updateSlides (init ) {
+                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.updatePos();
+            },
+            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;
+            },
+            // use when slot changed
+            slotChange () {
+                this.$nextTick(() => {
+                    this.slides = [];
+                    this.slideInstances = [];
+
+                    this.updateSlides(true, true);
+                    this.updatePos();
+                });
+            },
+            handleResize () {
+                this.listWidth = parseInt(getStyle(this.$el, 'width'));
+                this.updatePos();
+            },
+            add (offset) {
+                let index = this.currentIndex;
+                index += offset;
+                while (index < 0) index += this.slides.length;
+                index = index % this.slides.length;
+                this.currentIndex = index;
+            },
+            dotsEvent (event, n) {
+                if (event === this.trigger && this.currentIndex !== n) {
+                    this.currentIndex = n;
+                }
+            },
+            setAutoplay () {
+                window.clearInterval(this.timer);
+                if (this.autoplay) {
+                    this.timer = window.setInterval(() => {
+                        this.add(1);
+                    }, this.autoplaySpeed);
+                }
+            },
+            updateOffset () {
+                this.$nextTick(() => {
+                    this.handleResize();
+                    this.trackOffset = this.currentIndex * this.listWidth;
+                });
+            }
+        },
+        compiled () {
+            this.updateSlides(true);
+        },
+        watch: {
+            autoplay () {
+                this.setAutoplay();
+            },
+            autoplaySpeed () {
+                this.setAutoplay();
+            },
+            currentIndex (val, oldVal) {
+                this.$emit('on-change', oldVal, val);
+                this.updateOffset();
+            },
+            height () {
+                this.updatePos();
+            }
+        },
+        ready () {
+            this.handleResize();
+            this.setAutoplay();
+            window.addEventListener('resize', this.handleResize, false);
+        },
+        beforeDestroy () {
+            window.removeEventListener('resize', this.handleResize, false);
+        }
+    };
+</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 944a1645..15e1c9cf 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';
@@ -53,6 +54,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..066f12f6
--- /dev/null
+++ b/src/styles/components/carousel.less
@@ -0,0 +1,175 @@
+@carousel-prefix-cls: ~"@{css-prefix}carousel";
+@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;
+
+    &-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;
+
+        overflow: hidden;
+
+        z-index: 1;
+    }
+
+    &-item {
+        float: left;
+        height: 100%;
+        min-height: 1px;
+        display: block;
+    }
+
+    &-arrow {
+
+        border: none;
+        outline: none;
+
+        padding: 0;
+        margin: 0;
+
+        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-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 {
+        z-index: 10;
+
+        @padding: 7px;
+
+        display: none;
+
+        position: relative;
+        &-inside {
+            display: block;
+            position: absolute;
+            bottom: 10px - @padding;
+        }
+
+        &-outside {
+            display: block;
+            margin-top: 10px - @padding;
+        }
+
+        list-style: none;
+
+        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/src/styles/components/index.less b/src/styles/components/index.less
index 10f81742..0c613c25 100644
--- a/src/styles/components/index.less
+++ b/src/styles/components/index.less
@@ -35,4 +35,5 @@
 @import "date-picker";
 @import "time-picker";
 @import "form";
-@import "rate";
\ No newline at end of file
+@import "carousel";
+@import "rate";
diff --git a/test/app.vue b/test/app.vue
index 0a1e3cff..08592f56 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>
                 <li><a v-link="'/rate'">Rate</a></li>
             </ul>
         </nav>
diff --git a/test/main.js b/test/main.js
index f67ab015..11a8abb2 100644
--- a/test/main.js
+++ b/test/main.js
@@ -135,6 +135,11 @@ router.map({
             require(['./routers/form.vue'], resolve);
         }
     },
+    '/carousel': {
+        component: function (resolve) {
+            require(['./routers/carousel.vue'], resolve);
+        }
+    },
     '/rate': {
         component: function (resolve) {
             require(['./routers/rate.vue'], resolve);
diff --git a/test/routers/carousel.vue b/test/routers/carousel.vue
new file mode 100644
index 00000000..0171d80c
--- /dev/null
+++ b/test/routers/carousel.vue
@@ -0,0 +1,206 @@
+<template>
+    <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>
+        <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>
+        <i-col span="4">
+            <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>
+                <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>
+        <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; 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">
+            <Alert type="warning" show-icon>
+                警告提示文案
+                <template slot="desc">
+                    警告的提示描述文案警告的提示描述文案警告的提示描述文案
+                </template>
+            </Alert>
+        </Carousel-item>
+        <Carousel-item>
+            <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>
+        <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>
+    <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 {
+        data () {
+            return {
+                currentIndex: 0,
+                autoplay: true,
+                autoplaySpeed: 2000,
+                remove: false,
+                pushItem: [],
+                arrow: 'hover',
+                trigger: 'click',
+                dots: 'inside',
+                height: 'auto',
+                log: []
+            }
+        },
+        methods: {
+            push () {
+                this.pushItem.push('test');
+            },
+            slideChange (from, to) {
+                this.log.push(`From ${from} To ${to}`);
+            }
+        }
+    }
+</script>