Как создать простую следующую и предыдущую кнопку триггера для кнопок пагинации слайдера?

Я пытаюсь нести класс междуliс комбайномeach() а такжеeq() методы, когда кнопки нажимаются. Я использую тот же код с предыдущими и следующими кнопками, кромеi+1 а такжеi-1 но это возвращает мне разные проблемы.

Here is jsFiddle to examine.

HTML:

<span class="prev">prev</span>
<ul>
    <li>0</li>
    <li>1</li>
    <li class="active">2</li>
    <li>3</li>
    <li>4</li>
</ul>
<span class="next">next</span>

JQuery:

var li = $('li');

$('.prev').click(function() {
    li.each(function(i) {
        if ( $(this).hasClass('active') ) {
            console.log(i);
            //this returning current true value = 2

            li.removeClass('active');
            li.eq(i-1).addClass('active');
            //this is working better
            //problem is: not selecting 4
        }
    });
});

$('.next').click(function() {
    li.each(function(i) {
        if ( $(this).hasClass('active') ) {
            console.log(i);
            //this returning current true value = 2

            //problem starts:
            //li.removeClass('active');
            //when this is active; all active classes are gone

            li.eq(i+1).addClass('active');
            //try to select next 'li' here
            //but it is selecting all li's bigger than current value
        }
    });
});

Ответы на вопрос(5)

Ваш ответ на вопрос