github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: carousel customArrows demo

pull/77/merge
wangxueliang 2018-07-23 17:23:25 +08:00
parent 5f53be8042
commit 214347aa8f
1 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
components/carousel/demo/customArrows.md
View File

@ -11,21 +11,20 @@ Custom arrows display
```html
<template>
<a-carousel arrows>
<template slot="prevArrow" slot-scope="props">
<div
class="custom-slick-arrow"
>
<a-icon type="left-square" />
</div>
</template>
<template slot="nextArrow" slot-scope="props">
<div
class="custom-slick-arrow"
style="right: -20px"
>
<a-icon type="right-square" />
</div>
</template>
<div
slot="prevArrow" slot-scope="props"
class="custom-slick-arrow"
style="left: 10px;zIndex: 1"
>
<a-icon type="left-circle" />
</div>
<div
slot="nextArrow" slot-scope="props"
class="custom-slick-arrow"
style="right: 10px"
>
<a-icon type="right-circle" />
</div>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
@ -46,16 +45,18 @@ export default {}
}
.ant-carousel >>> .custom-slick-arrow {
display: block;
width: 25px;
height: 25px;
font-size: 25px;
background: #fff;
color: #5d5959;
color: #fff;
background-color: rgba(31,45,61,.11);
opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
color: #403d3d
opacity: 0.5;
}
.ant-carousel >>> .slick-slide h3 {