如何为幻灯片添加图例？ （解压器）

Posted 2023-05-09

【中文标题】如何为幻灯片添加图例？ （解压器）

【英文标题】：How I can give a legend to my slideshow? (Unslider)

【发布时间】：2014-04-14 10:03:26

【问题描述】：

我正在尝试使用 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 imgwidth: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>

【参考方案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>