Как создать простую следующую и предыдущую кнопку триггера для кнопок пагинации слайдера?
Я пытаюсь нести класс междуli
с комбайномeach()
а такжеeq()
методы, когда кнопки нажимаются. Я использую тот же код с предыдущими и следующими кнопками, кромеi+1
а такжеi-1
но это возвращает мне разные проблемы.
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
}
});
});