jCarousel Lite is a fantastic jQuery plug-in to display photo gallery. You can have a look at the demo at: http://www.gmarwaha.com/jquery/jcarousellite/#demo

On this demo, the photo gallery will only scroll left or right when you click on the left arrow and right arrow. On jCarousel’s document, we can initialize the carousel start scrolling when the page finishes loading by specify the option: auto

$(".slider").jCarouselLite({
visible: 4,
<strong>auto: true</strong>,
speed: 2000
});

What if I want it to stop when my mouse hover on any of the images? Oh, jCarousel does not originally handle mouse hover event. Well, DIY time.

Firstly, download the carousel original source code from the official website

open that file (jcarousellite_1.0.1.js)

Second, add a code block between line “function go(to){” (about line 292):

//<!--add by koumei
var isMouseOver = false;
$(this).mouseover(function(){
isMouseOver = true;
}).mouseout(function(){
isMouseOver = false;
});
//add by koumei-->
function go(to) {
...
...

Third, modify function go: (around line 293)

Change "if(!running)" to "if(!running && !isMouseOver)"

Fourth, DONE.

Quite simple, I hope the author will consider this function to the next release.

You can also download my modified version and the demo at:

http://koumei.net/download/carousel-demo.zip

This entry was posted on Wednesday, June 1st, 2011 at 8:37 am and is filed under Interesting, Lab, Open Source. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.