答案 0 :(得分:0)
您需要在jquery脚本中调用标题选项。
$(' .bxslider&#39)。bxSlider({ 标题:是的 });
答案 1 :(得分:0)
只需使用CSS并添加内容div,即可实现此目的,如下所示
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
});
});
.bannerDetail {
color: #fff;
top: 38px;
left: 221px;
position: absolute;
font-size: 50px;
}
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" />
<div class="textDetail">Funky roots</div>
</li>
<li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long and winding road" />
<div class="textDetail">The long and winding road</div>
</li>
<li><img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" />
<div class="textDetail">Happy trees</div>
</li>
</ul>
WorkingExanple:http://codepen.io/JoyCoder/pen/JYgzNL
答案 2 :(得分:0)
bxSlider API具有captions
选项:
$(function() {
var bx = $('.bxslider').bxSlider({
captions: true
});
});
在需要标题的图片上,使用title
属性。
<img src="image.png" title="This is a caption"/>