Цикл «активный» Класс с карусели

Question

У меня есть карусель с девятью слайдами, первый из которых имеет класс «активный».

<ul class='nav'> 
    <li class='left'>left</li> 
    <li class='right'>right</li> 
</ul> 

<ul class='carousel'> 
    <li class='active'></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 

При нажатии кнопки «вправо» нажата, активный класс должен перейти к следующему Ли (он также должен быть применен к первой Li после последнего).

И, очевидно, активный класс должен двигаться в противоположном направлении при нажатии левой кнопки.

Я пробовал следующее, которое работает до определенной точки, но я не знаю, как заставить активный класс вернуться к первому li после последнего.

$('.nav .right').click(function(){ 
    $('.carousel .active').removeClass('active').next().addClass('active'); 
}); 

Любая помощь будет принята с благодарностью. Благодарю.

Answer 1

$('.nav .right').click(function() { 
    $('.carousel .active:not(:last-child)').removeClass('active').next().addClass('active'); 
}); 
$('.nav .left').click(function() { 
    $('.carousel .active:not(:first-child)').removeClass('active').prev().addClass('active'); 
}); 

FIDDLE

Answer 2

Это, безусловно, может быть улучшен, но следующий код работает для того, что вам нужно сделать:

$('.nav .right').click(function(){ 
    var next = $('.carousel .active').removeClass('active').next(); 
    if (next.length == 0) { next = $('.carousel li').first(); } 
    next.addClass('active'); 
}); 

Answer 3

Попробуйте

var $carousel = $('.carousel'); 
$('.nav .right').click(function(){ 
    var next = $carousel.children('.active').removeClass('active').next(); 
    if(!next.length){ 
     next = $carousel.children().first(); 
    } 
    next.addClass('active'); 
}); 

$('.nav .left').click(function(){ 
    var prev = $carousel.children('.active').removeClass('active').prev(); 
    if(!prev.length){ 
     prev = $carousel.children().last(); 
    } 
    prev.addClass('active'); 
}); 

Демо: Fiddle

Другой вариант: Fiddle