如何在bxslider横幅中添加文字?

时间:2015-12-01 05:38:43

标签: javascript bxslider

添加一些文字,但设计破产

image

3 个答案:

答案 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"/>

http://bxslider.com/options#captions