我怎么能给我的幻灯片传奇？ （Unslider）

Question

我正在尝试使用Unslider进行滑块显示。 我已经有幻灯片显示工作，但现在我试图在我的幻灯片中给出一些传奇，但我没有在文档中找到任何信息。 你们中的任何一个人都试过这样做，可以给我一个帮助吗？

/*Banners unslider*/
.banner { position: relative; overflow: auto; width: 100%;}
.banner li { list-style: none; background-repeat:no-repeat;  background-size:cover;}
.banner ul li { float: left; max-height:235px; }
.banner ul li img{width:100%;}
.banner .dots { bottom: 20px; left: 0; position: absolute; right: 0;}
.banner .dots li { border: 2px solid #fff; border-radius: 6px; cursor: pointer; display: inline-block; height: 10px; margin: 0 4px; opacity: .4; text-indent: -999em; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s; width: 10px; }
 .banner .dots li.active { background: #fff; opacity: 1;}

Jquery的：

<script type="text/javascript">
    $(document).ready(function() {
    $("a.buttonl").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'elastic',
        closeEffect : 'elastic'
    });
})
</script>

HTML：

<section id="banner-container">

    <div class="banner">
        <ul>
            <li>     
                 <img src="" /> 
            </li>

            <li>     
                 <img src="images/image1.png" /> 
            </li>

            <li>     
                 <img src="images/image1.png" /> 
            </li>

            <li>     
                 <img src="images/image1.png" /> 
            </li>

        </ul>
    </div>

</section>

Answer 1

如果通过＆＃34; Legend＆＃34;你的意思是标题，标题或其他html元素，它真的很简单！只需在li's内添加您要显示的信息即可。他们之后需要在你的CSS中设置样式。

<div class="banner">
    <ul>
        <li>     
             <img src="" />
             <h2>Title</h2> 
             <p>Your Caption</p> 
        </li>
        <!-- And the same for the rest of your li's -->

    </ul>
</div>