Question

I am looking for some native JavaScript, or jQuery plugin, that meets the following specification.

• Sequentially moves over a set of images (ul/li)
• Continuous movement, not paging
• Appears infinite, seamlessly restarts at beginning
• Ability to pause on hover
• Requires no or minimal additional plugins

I realize this sounds simple enough. But I have looked over the web and tried Cycle and jCarousel/Lite with no luck. I feel like one should exist and wanted to pose the question before writing my own.

Any direction is appreciated. Thanks.

Answer 1

Both answers by MoDFoX and GSto are good. Usually I would use one of these, but these plugins didn’t meet the all the requirements. In the end this was pretty basic, so I just wrote my own. I have included the JavaScript below. Essentially it clones an element on the page, presumably a ul and appends it to the parent container. This in effect allows for continuous scrolling, right to left, by moving the element left and then appending it once out of view. Of course you may need to tweak this code depending on your CSS.

// global to store interval reference
var slider_interval = null;
var slider_width = 0;
var overflow = 0;

prepare_slider = function() { 
 var container = $('.sliderGallery');

 if (container.length == 0) {
  // no gallery
  return false;
 }

 // add hover event to pause slider
 container.hover(function() {clearInterval(slider_interval);}, function() {slider_interval = setInterval("slideleft()", 30);});

 // set container styles since we are absolutely positioning elements
 var ul = container.children('ul');
 container.css('height', ul.outerHeight(true) + 'px');
 container.css('overflow', 'hidden')

 // set width and overflow of slider
 slider_width = ul.width();
 overflow = -1 * (slider_width + 10); 

 // set first slider attributes
 ul.attr('id', 'slider1');
 ul.css({"position": "absolute", "left": 0, "top": 0}); 

 // clone second slider
 var ul_copy = ul.clone();

 // set second slider attributes
 ul.attr('id', 'slider2');
 ul_copy.css("left", slider_width + "px");

 container.append(ul_copy);

 // start time interval
 slider_interval = setInterval("slideleft()", 30);
}

function slideleft() {
 var copyspeed = 1;
 var slider1 = $('#slider1');
 var slider2 = $('#slider2');

 slider1_position = parseInt(slider1.css('left'));
 slider2_position = parseInt(slider2.css('left'));

 // cross fade the sliders
 if (slider1_position > overflow) {
  slider1.css("left", (slider1_position - copyspeed) + "px");
 }
 else {
  slider1.css("left", (slider2_position + slider_width) + "px");
 }

 if (slider2_position > overflow) {
  slider2.css("left", (slider2_position - copyspeed) + "px");
 }
 else {
  slider2.css("left", (slider1_position + slider_width) + "px");
 }
}