mip-carousel multi-image carousel

mip-carousel is used to support a display method of images in mip, allowing for multi-image carousel.

Example

response layout

<mip-carousel 
    layout="responsive" 
    width="600" 
    height="400">
    <mip-img 
        src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">
    </mip-img>
    <mip-img 
        src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">
    </mip-img>
    <mip-img 
        src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

Automatic rotation

<mip-carousel
    autoplay  
    layout="responsive" 
    width="600" 
    height="400">
    <mip-img 
        src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">
    </mip-img>
    <mip-img 
        src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">
    </mip-img>
    <mip-img 
        src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

Set rotation interval

<mip-carousel
    autoplay
    defer="1000"  
    layout="responsive" 
    width="600" 
    height="400">
    <mip-img 
        src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">
    </mip-img>
    <mip-img 
        src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">
    </mip-img>
    <mip-img 
        src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

Add indicator

<mip-carousel
    autoplay
    defer="1000"  
    layout="responsive" 
    width="600" 
    height="400"
    indicator
    >
    <mip-img 
        src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">
    </mip-img>
    <mip-img 
        src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">
    </mip-img>
    <mip-img 
        src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

Add page button

<mip-carousel
    autoplay
    defer="1000"  
    layout="responsive" 
    width="600" 
    height="400"
    indicator
    buttonController
    >
    <mip-img 
        src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">
    </mip-img>
    <mip-img 
        src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">
    </mip-img>
    <mip-img 
        src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

Add subtitle

<mip-carousel
    autoplay
    defer="1000"  
    layout="responsive" 
    width="600" 
    height="400"
    indicator
    buttonController
    >
    <a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">
        <mip-img 
            src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" layout="responsive" 
        width="600" 
        height="400">
        </mip-img>
        <div class="mip-carousle-subtitle">这里是title2</div>
    </a>
    <mip-img 
        src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg">
    </mip-img>
    <mip-img 
        src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

The mip-img node of the non-mip-carousel direct child element needs to set width and height attribute

<mip-carousel
    autoplay
    defer="1000" 
    layout="responsive" 
    width="600" 
    height="400">
    <mip-img 
        src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg">
    </mip-img>
    <a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">
        <mip-img 
            src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" width="600" height="400">
        </mip-img>
    </a>
    <mip-img 
        src="http://img3.3lian.com/2013/v9/58/d/25.jpg">
    </mip-img>
</mip-carousel>

Attribute

width

Description: Width, not the actual width, used in conjunction with the height attribute to set the image ratio
Required option: Yes
type :Number
Unit: None
Default value: None

height

Description: Height, not the actual height, is used in conjunction with the width attribute to set the image ratio
Required options: Yes
Type: Number
Unit: None
Default value: None

autoplay

Description: Automatic carousel switch
Required option: No
Type : String or empty
Value: "",autoplay
Unit: None
Default value: None

defer

Description: The time interval for each rotation , if autoplay is set, you can add defer to specify the rotation interval
Required option: No
Type: Number
Unit: ms
Default value: 2000