A nice option might be to go with bxslider: http://bxslider.com/examples/slideshow-adaptive-height
It has a lot of options, including text under each image. For example, you could modify the HTML code on that page from this:
Code:
<ul class="bxslider">
<li><img src="/images/730_200/hill_fence.jpg" /></li>
<li><img src="/images/730_100/tree_root.jpg" /></li>
<li><img src="/images/730_150/me_trees.jpg" /></li>
</ul>
to something like this:
Code:
<ul class="bxslider">
<li>
<div><img src="/images/730_200/hill_fence.jpg" /></div>
<div>This is a caption, and some other useful information about this work of art.</div>
</li>
<li>
<div><img src="/images/730_100/tree_root.jpg" /></div>
<div>This is a different caption, and some other useful information about this work of art.</div>
</li>
<li>
<div><img src="/images/730_150/me_trees.jpg" /></div>
<div>This is a totally different caption, for a different work, and some other useful information about this work of art.</div>
</li>
</ul>
It would then need plenty of styling, but that's a later issue.
It's quite easy to set up a slider like this. Have a look at the instructions that come with it, download the files and have a play around, and let us know if you need any help.
Reply With Quote
Originally Posted by ralph.m
Bookmarks