[英]Put fixed content to flex slider
Does anybody have idea how I can put content (div-menu) INSIDE (over sliding picture) my flex slide (li): 有人知道我如何将内容(div-menu)放在我的flex幻灯片(li)内(在幻灯片上):
Flex slider default code: Flex滑块默认代码:
<div class="wrapper_top">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/s1.jpg" />
</li>
<li>
<img src="img/s2.jpg" />
</li>
</ul>
</div>
</div>
and I want put for example .willbemenu div. 我想放例如.willbemenu div。 This is picture what i want: http://s7.postimg.org/5ul8zk1d7/WILLBE.jpg
这是我想要的图片: http : //s7.postimg.org/5ul8zk1d7/WILLBE.jpg
.willbemenu{width: 1000px; background-color: orange; padding: 10px; text-align: center;}
I try this way and work, but problem is when flex slider make slide, I need willbemenu div FIXED without sliding. 我尝试这种方式工作,但是问题是当flex滑块使幻灯片滑动时,我需要willbemenu div固定而不滑动。
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(img/s1.jpg);">
<div class="willbemenu">Some option Some option</div>
</li>
</div>
Use a div outside positioned absolute; 在绝对位置之外使用div; You can use css tricks to center.
您可以使用CSS技巧来居中。
<style>
.willbemenu{ width:1000px; background-color:orange; padding:10px; text-align:center; }
.willbemenu{ position:absolute; top:10px; left:50%; margin-left:-500px; z-index:1; }
</style>
<div class="flexslider">
<div class="willbemenu">Some menu stuff</div>
<ul class="slides">
<li><img src="img/s1.jpg" /></li>
<li><img src="img/s2.jpg" /></li>
</ul>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.