How can I automatically scroll an unordered list horizontally?

Question

I need to show two list items at the same time and automatically scroll to view all n seconds.

I see many complex photo slider plugins, but what about plain text?

Here's the script: http://jsfiddle.net/B9DsX/

HTML

 <ul> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Praesent commodo nisi eu sapien</li> <li>Fusce tempor, sapien vitae tempus dapibus</li> <li>Aenean pulvinar urna vel tortor</li> <li>Proin turpis tellus, fringilla eget molestie nec</li> <li>Etiam sed varius lacus</li> <li>Aenean facilisis tincidunt massa luctus feugiat</li> <li>Etiam suscipit vel erat sit amet fringilla</li> <li>Nulla sit amet eros mauris.</li> </ul> 

CSS

 ul { overflow-y: hidden; overflow-x: scroll; white-space: nowrap; padding:30px 0; margin:0; } li { display:inline; border:1px solid #ccc; padding:10px; margin:10px; list-style-type:none; } 

Answer 1

Here's a simple plugin function that will scroll endlessly through list items:

Update Now two at a time:

 $.fn.scrollList = function (delay) { delay = delay || 2000; var animateList = function ($list) { //get first child var $first = $list.children('li:first'); var width = $first.outerWidth(true); //animate first two off the screen $first.animate({ 'margin-left': $list.width() * -1 }, // on animation complete function () { //reset and move to the end of the list $(this).css('margin-left', 0).add($(this).next()).appendTo($list); //start again after delay setTimeout(function () { animateList($list) }, delay); }); }; return this.each(function () { var $that = $(this) setTimeout(function () { animateList($that); }, delay); }); }; 

You can call it like this:

 $('.container ul').scrollList(); 

Here is a demo script

Please note that it requires certain styles to work properly, especially for elements requiring margin-left:0 , as this property is animated

Also you need to remove the spaces between the <li> tags to avoid extra space between them, check this answer for different ways to do this

Answer 2

I just made a violin. This works, but the scrolling is not very smooth, and the edges of li are visible, but you get the idea. See demo

 var liNum = 1; var timerID; var maxLi = 0; $(function () { timerID = setInterval(scrollLi, 1000); //use 2500 for animation maxLi = $(".container ul li").length; }); function scrollLi() { if (liNum >= maxLi) { //reset $(".container ul").scrollLeft(0); // use this for animation instead // $(".container ul").animate({scrollLeft: 0}, 1000); liNum = 1; //clearInterval(timerID); } else { //scroll next two li width var x = $(".container ul li:nth-child(" + liNum + ")").outerWidth(true); liNum++; x += $(".container ul li:nth-child(" + liNum + ")").outerWidth(true); liNum++; $(".container ul").scrollLeft($(".container ul").scrollLeft() + x); // use this line for animation instead // $(".container ul").animate({scrollLeft: $(".container ul").scrollLeft() + x}, 1500); } } 

---

Update. If you want hidden scrollbars to be used overflow: hidden and to make them scroll smoothly, you can use animate() , as shown in this DEMO update. Please note that I changed the animation duration and interval. Changes in the above code are also mentioned as comments. You should play with him and see what suits your needs best.

Answer 3

provided, this is not quite what you asked for - but it was quick to hack. It is rather a fader, I hope you do not mind. You can set it on fire if you want. Set the width of the container to different sizes and try this.

  var i = 0, container = $('ul li','.container'); container.hide(); (function fadeIt() { container.eq(i).fadeIn(2000).fadeOut(100, function() { i++; if(i % container.length == 0) { i = 0; } fadeIt(); }); }()); 

Answer 4

The tricks used in photo slideshows can also be used for plain text. Some slide shows use relative absolute positioning tricks. Here is my move:

 .slideshow { position: relative; overflow: hidden; } .slideshow li { display: none; width: 50%; } .slideshow li.current { display: block; float: left; } .slideshow li.fadein { display: block; position: absolute; top: 0; } 

 $(function() { // make the first two slides "current" $(".slideshow li:lt(2)").addClass("current"); setInterval(function() { var current = $(".slideshow .current"); // current slides var slidein = $(".slideshow .current:last ~ li:lt(2)"); // next slides if (slidein.length == 0) { slidein = $(".slideshow li:lt(2)"); } slidein.addClass("fadein"); // make visible, absolutely positioned slidein.eq(0).css({ left: "100%" }).animate({ left: 0 }); slidein.eq(1).css({ left: "150%" }).animate({ left: "50%" }, function() { // reset and animate the "left" property // reset classes when animation is complete current.removeClass("current"); slidein.removeClass("fadein").addClass("current"); }); }, 2000); }); 

Demo here