Bx Slider with Captions

HTML

<script src="https://cdn.rawgit.com/deberoppa7/bxslider-4/master/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/stevenwanderski/bxslider-4/master/dist/jquery.bxslider.css">
<ul class="bxslider">
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Funky roots" data-url="http://google.com" /></li>
  <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="The long" data-url="http://cnn.com" /></li>
  <li><img src="http://bxslider.com/images/730_200/trees.jpg" title="Happy trees" data-url="http://yahoo.com" /></li>
</ul>

CSS

.bx-caption a {
  color: #ffffff;
}

.bx-wrapper .bx-caption span {
  font-weight: bold;
}

.bx-caption {
  text-align: center;
}

JavaScript

$('.bxslider').bxSlider({
  captions: true,
  hyperlinks: true
});