updated carousel style

Rijn
1 parent 538b964b
Showing 3 changed files with 55 additions and 11 deletions Show diff stats
src/components/carousel/carousel.vue
src/styles/components/carousel.less
test/routers/carousel.vue
 <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) => {
@@ -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%);
+        }
+    }
 }
@@ -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>