mip-carousel マルチ画像カルーセル


mip-carousel は、mip での画像の表示方法をサポートするために使用され、複数画像カルーセルを可能にします。

QQ截图20170204111942.png

例

応答レイアウト

<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>

自動カルーセル

<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>

カルーセルの時間間隔を設定

<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>

インジケーターを追加

<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>

ページボタンを追加

<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>

字幕を追加

<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>

non-mip -カルーセルダイレクト子要素の img ノードは、幅と高さの属性を設定する必要があります

<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>

属性

width

説明: 実際の幅ではなく、幅は、画像の比率を設定するために高さ属性と組み合わせて使用​​されます
必須オプション: はい
タイプ: 数値
単位: なし
デフォルト値: なし

高さ

説明: 実際の高さではなく、高さが幅属性と連動して画像比率を設定します
必須オプション: はい
タイプ: 数値
単位: なし
デフォルト値: なし

自動再生

説明: 自動カルーセルスイッチ
必須オプション: いいえ
タイプ: 文字列または空
値: ""、自動再生
単位: なし
デフォルト値: なし

遅延

説明:各回転の時間間隔 (設定されている場合) autoplay，可以添加defer カルーセルの時間間隔を指定する
必須オプション: いいえ
タイプ: 数値
単位: ms
デフォルト値: 2000