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;
}

You could just apply the _container_ styles from your fiddle directly to the _ul_ - it'll work the same way. :) I've proposed an edit to include the CSS to make this example complete, and applied those styles directly to the _ul_ to keep the example concise. — doppelgreener, Sep 05 '13 at 05:17

Praveen Lobo · Answer 1 · 2013-09-06T14:25:40.533

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.

Is this possible without a scrollbar? And with a smooth transition? — Ryan, Sep 06 '13 at 13:33

score 2 · Accepted Answer · edited May 23 '17 at 10:25

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

+1 mate, nice. just one thing, there seems to be a sudden jump (say 10px) in the scroll when in between one `li` and the next. do you also see it or is it just me? (I let the scroll run for a couple of minutes and it is all fine now, seems like it is just at the start). — Harry, Sep 05 '13 at 07:23
@Harry yes, the problem was caused by the whitespace between inline-block elements, I updated the demo and provided a link with different solutions for that, thanks for the feedback — Omar, Sep 05 '13 at 16:22
Thanks @koala_dev. Is it possible to keep the `li`'s the same width and allow word-wrapping? Also, is it possible to stop the animation every time a new pair of `li`'s get fully into view? Here's my update for the same width + adding height to the `li`'s: http://jsfiddle.net/B9DsX/35/ — Ryan, Sep 06 '13 at 13:33

score 1 · Answer 3 · answered Sep 05 '13 at 05:56

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();
        });
      }());

Thanks. This might work as well if I can't get the scrolling to work. Here's my update so far: http://jsfiddle.net/B9DsX/39/ Can you recommend a way to do two at once instead of one at a time? — Ryan, Sep 06 '13 at 15:14

Salman A · Answer 4 · 2013-09-05T08:44:17.413

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

This is beautiful! But I'm struggling to get the `.current` to slide left as the next pair moves in. Can you recommend an approach? — Ryan, Sep 06 '13 at 13:43

How can I auto scroll an unordered list horizontally?

HTML

CSS

4 Answers4