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