周期“活性”级与传送带(Cycle 'active' Class with Caro

我有九个幻灯片，其中第一个具有一类“活跃”的传送带。

<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）。

很显然，活性类需要被点击左键时在相反的方向上移动。

我尝试以下，其作品在一定程度上，但我不知道如何使活动类回去的第一里最后一个了。

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

任何帮助，将不胜感激。 谢谢。

Answer 1:

这当然可以得到改善，但下面的代码工作，你需要做的：

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

Answer 2:

$('.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');
});

小提琴

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');
});

演示： 小提琴

另一个变化： 小提琴

文章来源: Cycle 'active' Class with Carousel