MIP扩展通用组件mip-carousel(图片轮播)

mip-carousel 用来支持 mip 中图片的一种展示方式,支出多图轮播。

描述 用自定义的mip-carousel标签实现了子节点的轮播效果
可用性 稳定
示例 官网上线后增加示例

1. 使用


在MIP HTMl中,示例如下:

  1. <mip-carousel autoplay defer="1000" width="400" height="300">
  2.     <mip-img 
  3.         class="mip-img" 
  4.         popup 
  5.         alt="baidu mip img" 
  6.         src="http://ztd00.photos.bdimg.com/ztd/w%3D350%3Bq%3D70/sign=e3bb1c4b97ef76c6d0d2fd2ead2d8cc7/f703738da9773912b57d4b0bff198618367ae205.jpg">
  7.         <p class="mip-img-subtitle">带图片标题的类型</p>
  8.     </mip-img>
  9.     <mip-img 
  10.         class="mip-img" 
  11.         popup 
  12.         alt="baidu mip img2" 
  13.         src="http://ztd00.photos.bdimg.com/ztd/w%3D350%3Bq%3D70/sign=e3bb1c4b97ef76c6d0d2fd2ead2d8cc7/f703738da9773912b57d4b0bff198618367ae205.jpg">
  14.         <p class="mip-img-subtitle">带图片标题的类型2</p>
  15.     </mip-img>
  16. </mip-carousel>

2. 属性


轮播组件所涉及的属性有:自动轮播(autoplay),间隔时间(defer),宽度(width)和高度(height)

自动轮播(autoplay)

    ○ 是否必填:否
    ○ 说明:如果需要自动轮播功能,可以加上autoplay属性,不需要带任何值,或者autoplay="autoplay",其他写法均无效

间隔时间(defer)

    ○ 是否必填:否
    ○ 说明:每次轮播的时间间隔,单位ms,如果设置了autoplay,可以添加defer来指定轮播的时间间隔,默认值2000。

宽度(width)

    ○ 是否必填:是
    ○ 说明:与高度属性配合来设置图片比例。

高度(height)

    ○ 是否必填:是
    ○ 说明:与宽度属性配合来设置图片比例。

发布日期:

所属分类: 网站运营 SEO 标签: