added horizontal dots

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