Display multiple content items from an unordered list with javascript

0 Views

I would like to make the following code display 3 of the 6 list items at a time, instead of just one, chronologically. This is example item content: 

<ul id="newgall">
    <li>
        <div class="newsblock">ITEM CONTENT 1</div>
    </li>
    <li>
        <div class="newsblock">ITEM CONTENT 2</div>
    </li>
    <li>
        <div class="newsblock">ITEM CONTENT 3</div>
    </li>
    <li>
        <div class="newsblock">ITEM CONTENT 4</div>
    </li>
    <li>
        <div class="newsblock">ITEM CONTENT 5</div>
    </li>
    <li>
        <div class="newsblock">ITEM CONTENT 6</div>
    </li>
</ul>

I use the following script:

Read More
$('#newgall li:first').addClass('curr');
$('#newgall li:not(:first)').hide();

var slide = function () {
    var Act_curr = $('#newgall li.curr');
    Act_curr.hide().removeClass('curr');

    if (Act_curr.next()[0] && Act_curr.next()[0].nodeName == 'LI') {
        Act_curr.next().show('fade').addClass('curr');
    } else {
        $('#newgall li:first').addClass('curr').show('fade');
    }
    setTimeout(slide, 4500);
};

slide();

The ultimate hope is use this as recent posts ticker for WordPress. Thanks for the help!

Post Views: 0

Related posts

Leave a Reply

2 comments

  2. If you’re looking for the list to increment by one item at a time as opposed to in groups of three, you can use:

    for(var i = 1; i <= 3; i++){
    $('#newgall li:nth-child(' + i + ')').addClass('curr');    
}
$('#newgall li:not(.curr)').hide();

var slide = function () {
    var Act_curr = $('#newgall li.curr:eq(0)');
    var newItem = $('#newgall li.curr:eq(2)');

    Act_curr.hide().removeClass('curr');

    if (newItem.next()[0] && newItem.next()[0].nodeName == 'LI') {
        newItem.next().show('fade').addClass('curr');
    } else {
        $('#newgall .curr').removeClass('curr').hide();
        $('#newgall li:first').addClass('curr').show('fade');
        $('#newgall li:nth-child(2)').addClass('curr').show('fade');
        $('#newgall li:nth-child(3)').addClass('curr').show('fade');
    }
    setTimeout(slide, 4500);
};

slide();

    Example