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