我怎么能给我的幻灯片传奇? (Unslider)

时间:2014-03-11 01:36:51

标签: jquery jquery-plugins slider slideshow

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

1 个答案:

答案 0 :(得分:0)

如果通过&#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>