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: