求解？图片轮播下标题怎么弄？

Hello MUI中有图片轮播示例，其中有一个“下方悬浮标题”的示例，DOM结构如下：

<div id="slider" class="mui-slider">  
    <div class="mui-slider-group mui-slider-loop">  
        <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->  
        <div class="mui-slider-item mui-slider-item-duplicate">  
            <a href="#">  
                <img src="../images/yuantiao.jpg">  
                <p class="mui-slider-title">静静看这世界</p>  
            </a>  
        </div>  
        <div class="mui-slider-item">  
            <a href="#">  
                <img src="../images/shuijiao.jpg">  
                <p class="mui-slider-title">幸福就是可以一起睡觉</p>  
            </a>  
        </div>  
        <div class="mui-slider-item">  
            <a href="#">  
                <img src="../images/muwu.jpg">  
                <p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>  
            </a>  
        </div>  
        <div class="mui-slider-item">  
            <a href="#">  
                <img src="../images/cbd.jpg">  
                <p class="mui-slider-title">Color of SIP CBD</p>  
            </a>  
        </div>  
        <div class="mui-slider-item">  
            <a href="#">  
                <img src="../images/yuantiao.jpg">  
                <p class="mui-slider-title">静静看这世界</p>  
            </a>  
        </div>  
        <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->  
        <div class="mui-slider-item mui-slider-item-duplicate">  
            <a href="#">  
                <img src="../images/shuijiao.jpg">  
                <p class="mui-slider-title">幸福就是可以一起睡觉</p>  
            </a>  
        </div>  
    </div>  
    <div class="mui-slider-indicator mui-text-right">  
        <div class="mui-indicator mui-active"></div>  
        <div class="mui-indicator"></div>  
        <div class="mui-indicator"></div>  
        <div class="mui-indicator"></div>  
    </div>  
</div>