How can I auto scroll an unordered list horizontally?

Question

I need to show two list items at a time and auto scroll to view all every n seconds.

I see lots of complex photo slider plugins, but what about simple text?

Here's a fiddle: 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 infinitely scroll 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's a demo fiddle

Note that to work correctly it requires some specific styles, most notably the items need margin-left:0 since that's the property being animated

Also you'll need to remove any whitespace between your <li> tags to avoid extra space between them, check this answer for different ways to do that

Answer 2

I just made a quick fiddle. This works but 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 scrollbars hidden use overflow: hidden and to make it scroll smoothly, you can use animate() as shown in this update DEMO. Note that I have changed the animation duration and the interval. Also mentioned the changes in above code as comments. You should play around with it and see what fits your needs better.

Answer 3

The tricks used in photo slideshows can be used on simple text as well. Some slideshows use relative-absolute positioning tricks. Here is my go at it:

.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

Answer 4

granted, this isn't exactly what you asked for - but it was fast to whip up. This is more of a fader, i hope you don't mind. You could sub an animate if you wish. Set the width of container to a different size 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();
        });
      }());