ant-design vue中走马灯a-carousel组件的简单使用
ant-desigin 中走马灯a-carousel组件的简单使用
·
<a-carousel arrows>
<a slot="customPaging" slot-scope="props">
<img :src="templateList[props.i].dot" alt="" />
</a>
<div
slot="prevArrow"
slot-scope="props"
:style="{ left: '10px', zIndex: '1' }"
>
<a-icon type="left-circle" />
</div>
<div
slot="nextArrow"
slot-scope="props"
style="right: 10px"
>
<a-icon type="right-circle" />
</div>
<div v-for="(item, index) in templateList" :key="index">
<img :src="item.imgurl" alt="" />
</div>
</a-carousel>
templateList为数据源数组,包含imgurl和dot等信息。比如:
[
{
index: '1',
imgurl: require("@/assets/img/disk1.jpg"),
name:'xxx',
dot:require("@/assets/img/dot1.png")
},
...
]
更多推荐
已为社区贡献7条内容
所有评论(0)