How to setup jQuery jCarousel lite with caption?
Having many clients that are web merchants with online shops, we often came in need of using jCarousel lite. jQuery Carousel lite, for all of those who haven't heard of it yet, is a jQuery plugin that gives you ability to navigate images and/or HTML in a carousel-style widget. For more information on the plugin itself, please visit http://www.gmarwaha.com/jquery/jcarousellite/.
When used properly (without being excessive and going beyond good taste) it can both improve the navigation experience and give the page a kind of sophisticated and advanced look.
Here is jQuery code (with comments) for sliding images with appropriate caption below each image:
//on DOM ready set up div with the ID of „horizontalslider“ to be our slider
$(function(){
$("#horizontalslider").jCarouselLite({
auto:5000, //amount of time between 2 consecutive slides
speed:1000,//transition speed
circular:true,// Setting it to true enables circular navigation of slides
btnPrev:"#arrowleft",//Selector for the "Previous" button.
btnNext:"#arrowright",//Selector for the "Next" button.
visible:3,//define how many visible slides at one moment we want
//this is the part for our caption handling
afterEnd: function(a) {//call a function after every slide and pass as an argument array of all slides
var text=$(a[1]).children("p").html();//we define variable „text“ which contains matching child <p> html. Why we select a[1]? Because we've set up 3 visible slides and middle slider always has index 1.
$("#caption").html(text); //we use our variable named “text” to fill up html content of caption DIV with the ID of „caption“
... and here is the whole HTML document.
<html>
<head>
//load jquery library
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
//load jCarouselLite
<script type="text/javascript" src="/js/jcarousellite_1.0.1.js"></script>
<style type=“text/css“>
//set up display “none” for caption holders so they aren't visible, since we just need paragraph’s html content
ul# imageslist li p
{
display:none;
}
</style>
</head>
<body>
<div id="horizontalslider"> <!-- slider -->
<ul id="imageslist"><!-- define an “ul” list where each “li” element represents a single slide -->
<li><img src="/images/somepic1.jpg" width="203" height="245"/><p>Some caption for first image</p></li>
<li><img src="/images/somepic2.jpg" width="203" height="245"/><p>Some caption for second image </p></li>
<li><img src="/images/somepic3.jpg" width="203" height="245"/><p>Some caption for third image </p></li>
</ul>
</div>
<!-- You can setup initial html content for „caption“ or you can leave it blank as we did -->
<div id=“caption“>
</div>
</body>
</html>
And that’s all; you have nice, functional carousel widget on your page. To see how we put it in use, please visit http://www.sjz.ba/eng
Thanks for reading and please visit us again. C U
