我怎样才能给我的幻灯片添加一个图例呢？(取消滑块)

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

如果你所说的“传奇”指的是标题、字幕或其他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>