How to add text in bxslider banner?

Question

Add some text but design getting broke

Answer 1

Simply using CSS and adding an content div, you can achieve this, like below

$(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