Skip to content
My Docs

CarouselCard 自定义走马灯

基本用法

自定义走马灯 可以实现自定义组件的无限滚动展示，可以根据需要设置滚动方向、滚动速度。

title1

image1

footer1

btnText1

title2

image2

footer2

btnText2

title3

image3

footer3

btnText3

title4

image4

footer4

btnText4

title5

image5

footer5

btnText5


请将自定义组件作为插槽传入，数据源及插槽格式如下：

<CarouselCard


  datasource={[
    {title: 'title1', image: 'image1', footer: 'footer1', btnText: 'btnText1'},
    {title: 'title2', image: 'image2', footer: 'footer2', btnText: 'btnText2'},
    {title: 'title3', image: 'image3', footer: 'footer3', btnText: 'btnText3'},
    {title: 'title4', image: 'image4', footer: 'footer4', btnText: 'btnText4'},
    {title: 'title5', image: 'image5', footer: 'footer5', btnText: 'btnText5'}
  ]}>
  {(item) =>  <div class='w-80 mx-8 border border-accent'>
  <p>{item.title}</p>
  <p>{item.image}</p>
  <p>{item.footer}</p>
  <p>{item.btnText}</p>
  </div>}
</CarouselCard>

API

属性说明类型默认值
datasource数据源Array[]
time滑动需要的时间string40s
direction滑动的方向
从左到右：‘LTR’，从右到左：‘RTL’		stringRTL