Advanced Captions with bxslider

Question

This question has already been asked, but has no answer - I believe because not enough information was provided.

I am using the bxslider as my template. See here: http://bxslider.com/examples/image-slideshow-captions

I can create a very simply caption using the "title" attribute, but I want to be able to create subtitles (with different attributes like smaller text) and I want to turn this into a link. I've tried implementing a div within the container, and perhaps obviously, I can't get that to sync with the slider without implementing it with jquery. I've also tried editing the CSS to no avail.

How can I add a caption that more than just an image title? Like a div overlaying the picture?

Answer 1

You don't even need to use the captions option provided by bxslider. Add the captions as part of the li tag that forms your slide. That's what the captions:true option does anyways, i.e appends the div with bx-caption class to your slide.

For eg:

  <li>
      <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
      <div class="caption1"> 
        <span>Image 1</span>
        <div class="caption2"><a id="img1a" href="#">Visit Australia</a></div>
      </div>
 </li>

This way using css, you can play around with the font sizes too.

Here's the the fiddle http://jsfiddle.net/s2L9P/