mip-carousel滑屏banner详细教程

先直接上最完整的代码吧!这个很好的东西就是不需要引用别的js了,默认的那个就行了!

<mip-carousel
    autoplay
    defer="1000"  
    layout="responsive" 
    width="600" 
    height="400"
    indicator
    indicatorId="mip-carousel-example"
    buttonController
    >
    <mip-img 
        src="https://www.mipengine.org/static/img/sample_01.jpg">
    </mip-img>
    <a href="">
    <mip-img 
        src="https://www.mipengine.org/static/img/sample_02.jpg">
    </mip-img>
     <div class="mip-carousle-subtitle">这里是链接到www.xhcss.com的链接</div>
    </a>
    <mip-img 
        src="https://www.mipengine.org/static/img/sample_03.jpg">
    </mip-img></mip-carousel>
    <!--下面是撑开元素-->
    <div class="mip-carousel-indicator-wrapper">
    <div class="mip-carousel-indicatorDot" id="mip-carousel-example">
        <div class="mip-carousel-activeitem mip-carousel-indecator-item"></div>
        <div class="mip-carousel-indecator-item"></div>
        <div class="mip-carousel-indecator-item"></div>
    </div></div>

参数说明

autoplay:是否自动播放,不加就不自动播放

defer="1000" 自动播放时间,1000大概1秒吧! 自由设置

layout="responsive" :布局模式,详情可以参考mip组件布局。//responsive能够根据width、height的值,算出元素对应的比例,在不同屏幕宽度上做自适应,非常适合图片、视频等需要大小自适应的组件

width;600; 别管吧!会自动响应宽度的,这样直接设置可以加快装载速度

height:400;同上

indicator:加数字指示器

indicatorId="mip-carousel-example":加下面的点点指示器

buttonController:加翻页按钮,移动端没啥必要加,都是滑动的!

注意下面这段的方法是加链接与副标题的!

    <a href="">
    <mip-img 
        src="https://www.mipengine.org/static/img/sample_02.jpg">
    </mip-img>
     <div class="mip-carousle-subtitle">这里是链接到www.xhcss.com的链接</div>
    </a>

好了!自己试下吧!

写的好!

微信扫一扫赏大洋
相关文档