Question

I’m trying to loop a list making a carousel effect. I think it should know first the counts of all the list so it can do math. then it can do something like this. If it add on the other side it will remove something on the other side. So if I remove the first list item it will add the the last item.

$(function() {

    $('#up').mouseenter(goUp);
    $('#down').mouseenter(goDown);

    function goUp() {
        $('#list').last('li').remove;
        $('#list').first('li').append('put the first item here')
    }


    function goDown() {
        $('#list').first('li').remove;
        $('#list').last('li').append('put the first item here')
    }   

}

<a id="up">+</a>
<ul id="list">
    <li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>

</ul>

<a id="down">-</a>

Answer 1

You have a bunch of errors there and I think your logic is wrong. You want to use a .current class and hide() or show() the items. Something like this should work.

$items.hide().first().addClass('cur').show();

var actions = {
    getCurIdx: function(){ 
        return $items.filter('.cur').index(); 
    },
    goTo: function(idx){
        // Something like...
        $items
       .removeClass('cur').hide()
       .eq(idx).addClass('cur').show();
    },
    next: function(){ 
        var _idx = actions.getCurIdx(); 
        if(_idx < $items.length) { 
            actions.goTo(_idx+1); 
        } else {
            actions.goTo(0); // Go first
        }
    },
    prev: function(){ 
        var _idx = actions.getCurIdx(); 
        if(_idx >= 0) { 
            actions.goTo(_idx-1); 
        } else {
            actions.goTo($items.length-1); // Go last
        }
    }
};

$next.click(function(){ actions.next(); });
$prev.click(function(){ actions.prev(); });