mip-carousel多图轮播代码示例

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

mip-carousel多图轮播代码示例示例

response 布局

<mip-carousel 
    layout="responsive" 
    width="600" 
    height="400">
    <mip-img 
        src="http://www.yukx.com/image-1.jpg">
    </mip-img>
    <mip-img 
        src="http://www.yukx.com/image-2.jpg">
    </mip-img>
    <mip-img 
        src="http://www.yukx.com/image-3.jpg">
    </mip-img>
</mip-carousel>

自动轮播

<mip-carousel
    autoplay  
    layout="responsive" 
    width="600" 
    height="400">
    <mip-img 
        src="http://www.yukx.com/image-2.jpg">
    </mip-img>
    <mip-img 
        src="http://www.yukx.com/image-1.jpg">
    </mip-img>
    <mip-img 
        src="http://www.yukx.com/image-3.jpg">
    </mip-img>
</mip-carousel>

设置轮播时间间隔

<mip-carousel
    autoplay
    defer="1000"  
    layout="responsive" 
    width="600" 
    height="400">
    <mip-img 
        src="http://www.yukx.com/image-1.jpg">
    </mip-img>
    <mip-img 
        src="http://www.yukx.com/image-2.jpg">
    </mip-img>
    <mip-img 
        src="http://www.yukx.com/image-3.jpg">
    </mip-img>
</mip-carousel>

加指示器

<mip-carousel
    autoplay
    defer="1000"  
    layout="responsive" 
    width="600" 
    height="400"
    indicator
    >
    <mip-img 
        src="http://www.yukx.com/image-2.jpg">
    </mip-img>
    <mip-img 
        src="http://www.yukx.com/image-2.jpg">
    </mip-img>
    <mip-img 
        src="http://www.yukx.com/image-2.jpg">
    </mip-img>
</mip-carousel>

加翻页按钮

<mip-carousel
    autoplay
    defer="1000"  
    layout="responsive" 
    width="600" 
    height="400"
    indicator
    buttonController
    >
    <mip-img 
        src="http://www.yukx.com/image-2.jpg">
    </mip-img>
    <mip-img 
        src="http://www.yukx.com/image-2.jpg">
    </mip-img>
    <mip-img 
        src="http://www.yukx.com/image-2.jpg">
    </mip-img>
</mip-carousel>

加副标题

<mip-carousel
    autoplay
    defer="1000"  
    layout="responsive" 
    width="600" 
    height="400"
    indicator
    buttonController
    >
    <a target="_blank" href="http://www.yukx.com/">
        <mip-img 
            src="http://www.yukx.com/image-2.jpg" layout="responsive" 
        width="600" 
        height="400">
        </mip-img>
        <div class="mip-carousle-subtitle">这里是title2</div>
    </a>
    <mip-img 
        src="http://www.yukx.com/image-2.jpg">
    </mip-img>
    <mip-img 
        src="http://www.yukx.com/image-2.jpg">
    </mip-img>
</mip-carousel>

非 mip-carousel 直接子级元素的 mip-img 节点需要设置 width 和 height 属性

<mip-carousel
    autoplay
    defer="1000" 
    layout="responsive" 
    width="600" 
    height="400">
    <mip-img 
        src="http://www.yukx.com/image-2.jpg">
    </mip-img>
    <a target="_blank" href="http://www.yukx.com/">
        <mip-img 
            src="http://www.yukx.com/image-2.jpg" width="600" height="400">
        </mip-img>
    </a>
    <mip-img 
        src="http://www.yukx.com/image-2.jpg">
    </mip-img>
</mip-carousel>

属性

width

说明：宽度，不是实际宽度，与高度属性配合来设置图片比例
必选项：是
类型：数字
单位：无
默认值：无

height

说明：高度，不是实际高度，与宽度属性配合来设置图片比例
必选项：是
类型：数字
单位：无
默认值：无

autoplay

说明：自动轮播开关
必选项：否
类型：字符串或空
取值："",autoplay
单位：无
默认值：无

defer

说明：每次轮播的时间间隔，如果设置了autoplay，可以添加defer来指定轮播的时间间隔
必选项：否
类型：数字
单位：ms
默认值：2000

原文链接: https://www.yukx.com/h5mip/article/details/2189.html 优科学习网mip-carousel多图轮播代码示例