Image caption not working correctly

Question

I am using the SlidesJS JQuery plugin to display a sliding banner along the top of a webpage.

However, I am having troubles adding image captions that overlay on the images. As per the website above I create a new p with the class caption and enter my caption in that, but from what I can tell the plugin is thinking that this caption div is another slide and showing just the caption text after each of the images.

You can view the page here.

Answer 1

You might want to check the example SlidesJS with caption. A look into your html code and see right away that you are using one div block for all the images(slides). On the example code on the link, they split the images(slides) per div so that when you need to add a caption, you simply add a child inside div.

Answer 2

Their example has each slide within it's own and then the caption inside another div like so:

<div class="slide">
   <a href="/gosomewhere"><img src="/images/myimage"/></a>
   <div class="caption"><p>this image is awesome</p></div>
</div>

Without actually trying it, I think you may be missing the slide as well as the child caption classed div's