diff --git a/examples/routers/carousel.vue b/examples/routers/carousel.vue
index 097d257b..a7706997 100644
--- a/examples/routers/carousel.vue
+++ b/examples/routers/carousel.vue
@@ -1,39 +1,79 @@
-<style>
-    .demo-carousel{
-        height: 200px;
-        line-height: 200px;
-        text-align: center;
-        color: #fff;
-        font-size: 20px;
-        background: #506b9e;
-    }
-</style>
 <template>
-    <div style="width: 400px;">
-        <Carousel v-model="value1" loop arrow="always" @on-change="handleChange" @on-click="handlerClick">
-            <CarouselItem v-for="it in 4" :key="it">
-                <div class="demo-carousel">
-                    {{it}}
-                </div>
+    <div>
+        <!--#6076-->
+        <Carousel loop>
+            <CarouselItem>
+                <div class="demo-carousel">111111111111</div>
+            </CarouselItem>
+            <CarouselItem>
+                <div class="demo-carousel">2</div>
+            </CarouselItem>
+            <CarouselItem>
+                <div class="demo-carousel">3</div>
+            </CarouselItem>
+            <CarouselItem>
+                <div class="demo-carousel">4</div>
             </CarouselItem>
         </Carousel>
-        <Button @click="value1 = 2">change</Button>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                value1: 0
+
             }
         },
         methods: {
-            handleChange (old, newval) {
-                console.log(old, newval,'---on-change');
-            },
-            handlerClick(index){
-                console.log(index,'------on-click');
-            }
+
         },
+        mounted () {
+
+        }
     }
 </script>
+<style>
+    .demo-carousel{
+        height: 100px;
+    }
+</style>
+<!--<style>-->
+<!--    .demo-carousel{-->
+<!--        height: 200px;-->
+<!--        line-height: 200px;-->
+<!--        text-align: center;-->
+<!--        font-size: 20px;-->
+<!--    }-->
+<!--</style>-->
+<!--<template>-->
+<!--    <div>-->
+<!--        <Carousel v-model="value1" loop @on-change="handleChange" @on-click="handlerClick">-->
+<!--            <CarouselItem v-for="it in 4" :key="it">-->
+<!--                <div class="demo-carousel">-->
+<!--                    {{it}}<Button @click="handlerIndexClick(it)">点击事件</Button>-->
+<!--                </div>-->
+<!--            </CarouselItem>-->
+<!--        </Carousel>-->
+<!--        <Button @click="value1 = 2">change</Button>-->
+<!--    </div>-->
+<!--</template>-->
+<!--<script>-->
+<!--    export default {-->
+<!--        data () {-->
+<!--            return {-->
+<!--                value1: 0-->
+<!--            }-->
+<!--        },-->
+<!--        methods: {-->
+<!--            handleChange (old, newval) {-->
+<!--                console.log(old, newval,'-&#45;&#45;on-change');-->
+<!--            },-->
+<!--            handlerClick(index){-->
+<!--                console.log(index,'&#45;&#45;&#45;&#45;&#45;&#45;on-click');-->
+<!--            },-->
+<!--            handlerIndexClick(it){-->
+<!--                console.log(it,'&#45;&#45;&#45;&#45;&#45;&#45;it')-->
+<!--            }-->
+<!--        },-->
+<!--    }-->
+<!--</script>-->
diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
index 542c726a..6bfd7fd6 100644
--- a/src/components/carousel/carousel.vue
+++ b/src/components/carousel/carousel.vue
@@ -113,10 +113,13 @@
                 ];
             },
             trackStyles () {
+                // #6076
+                const visibleStyle = this.trackIndex === -1 ? 'hidden' : 'visible';
                 return {
                     width: `${this.trackWidth}px`,
                     transform: `translate3d(${-this.trackOffset}px, 0px, 0px)`,
-                    transition: `transform 500ms ${this.easing}`
+                    transition: `transform 500ms ${this.easing}`,
+                    visibility : visibleStyle
                 };
             },
             copyTrackStyles () {
@@ -125,7 +128,7 @@
                     transform: `translate3d(${-this.trackCopyOffset}px, 0px, 0px)`,
                     transition: `transform 500ms ${this.easing}`,
                     position: 'absolute',
-                    top: 0
+                    //top: 0
                 };
             },
             arrowClasses () {
@@ -198,8 +201,8 @@
                     child.width = this.listWidth;
                     child.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
                 });
-
-                this.trackWidth = (this.slides.length || 0) * this.listWidth;
+                const slidesLength = this.slides.length || 0
+                this.trackWidth = slidesLength * this.listWidth;
             },
             // use when slot changed
             slotChange () {
diff --git a/src/styles/components/carousel.less b/src/styles/components/carousel.less
index e8c69acf..736e11a0 100644
--- a/src/styles/components/carousel.less
+++ b/src/styles/components/carousel.less
@@ -24,15 +24,14 @@
 
     &-track {
         position: relative;
-        top: 0;
+        top: 100%;
         left: 0;
         display: block;
-
         overflow: hidden;
-
         z-index: 1;
         &.higher {
             z-index: 2;
+            top: 0;
         }
     }