幻灯片顶部带有标题的柔性滑块
flexslider with caption at top of slide
我正在使用每张幻灯片上带有标题的flexslider。这有效,除了我希望标题位于幻灯片的顶部,而不是底部。我可以看到将标题放在顶部的唯一方法是绝对定位它,但是当我这样做时,标题的宽度太宽(数千像素,而不是父元素的宽度)。
<div class="flexslider">
<ul class="slides">
<li>
<img src="data/homeSlides/brennys.jpg">
<p class="flex-caption">Brenny's Motorcycle Clinic ></p>
</li>
<li>
<img src="data/homeSlides/aledoFireStation.jpg">
<p class="flex-caption">Aledo Fire Protection District ></p>
</li>
<li>
<img src="data/homeSlides/trueNorth.jpg">
<p class="flex-caption">True North ></p>
</li>
<li>
<img src="data/homeSlides/operationThreshold.jpg">
<p class="flex-caption">Operation Threshold ></p>
</li>
<li>
<img src="data/homeSlides/sadler.jpg">
<p class="flex-caption">Sadler ></p>
</li>
</ul>
</div>
CSS:
.flex-caption {
background:rgba(73, 92, 94, 1);
height:50px;
line-height:50px;
margin:0;
text-align:right;
color:#ff5200;
padding-right:20px;
bottom:0;
width:98%;
}
js小提琴
如何使标题正确显示在幻灯片顶部?
.flex-caption {
background:rgba(73, 92, 94, 1);
height:50px;
line-height:50px;
margin:0;
text-align:right;
color:#ff5200;
padding-right:20px;
top:0;
right:20%; /*Adjust this by yourself to make it look better*/
width:98%;
position:absolute;
}
ul.slides li{
position:relative; /*You need this*/
}
#wrapper{
width:80%;
}
你需要一些调整,首先你需要设置li相对,这样它就成为绝对子项的参考框。 Z-index肯定会将文本放在顶部:
$(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
.flex-caption {
background: rgba(73, 92, 94, 1);
height: 50px;
line-height: 50px;
margin: 0;
text-align: right;
color: #ff5200;
padding-right: 20px;
top: 0;
left: 0%;/* added */
width: 91%;;/* added */
position: absolute;
z-index: 1;;/* added */
}
li {
position: relative;;/* added */
}
#wrapper {
width: 80%;
}
}
<div id="wrapper">
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/brennys.jpg">
<p class="flex-caption">Brenny's Motorcycle Clinic ></p>
</li>
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/aledoFireStation.jpg">
<p class="flex-caption">Aledo Fire Protection District ></p>
</li>
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/trueNorth.jpg">
<p class="flex-caption">True North ></p>
</li>
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/operationThreshold.jpg">
<p class="flex-caption">Operation Threshold ></p>
</li>
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/sadler.jpg">
<p class="flex-caption">Sadler ></p>
</li>
</ul>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
相关文章:
- 花式盒子3.0标题在顶部
- 滚动然后修复到 html 中的顶部标题
- 试图在CSS中以顶部标题居中链接,但不会移动
- 幻灯片顶部带有标题的柔性滑块
- 粘性标题捕捉到顶部到早期
- 使粘性标题粘在顶部
- 如何将剑道网格标题文本保持在顶部
- 如何在输入单击时出现键盘时使标题粘在顶部 (iPhone)
- 通过单击任何单元格或表格数据及其左侧和顶部标题进行查找
- 如何通过jquery将滚动头文本加载到顶部固定标题区域
- jQuery:在滚动时切换标题类,如果页面不在顶部
- 将红色标题附加到边框顶部
- WordPress-标题位置顶部,左&正确的
- 如何在外部网站的顶部显示webapp的标题栏
- 如何防止任何iframe或任何其他脚本在顶部窗口更改文档的标题
- 在页面顶部显示标题-滚动事件重新触发问题
- 使用换行标题时,在顶部显示标题文本
- 纸卷标题面板,工具栏到达顶部后保留
- Angular注入了长内容的页面会让整个页面在页面顶部下方加载,切断了页面标题
- 获取标题的高度,并在滚动到标题之外时显示顶部导航