循环“活动”类与旋转木马 [英] Cycle 'active' Class with Carousel

问题描述

我有一个有九张幻灯片的旋转木马，其中第一张有一个活动类别。

I have a carousel with nine slides, the first of which has a class of 'active'.

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

When the 'right' button is clicked, the active class needs to move to the next li (it also needs to be applied back to the first li after the last one).

显然，当点击左键时，活动类需要向相反的方向移动。

And obviously, the active class needs to move in the opposite direction when the left button is clicked.

我尝试了下面的例子，但是我不知道如何使活动类返回到最后一个之后的第一个li 。

I tried the following, which works up to a point, but I don't know how to make the active class go back to the first li after the last one.

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

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

Any help would be appreciated. Thanks.

推荐答案

这当然可以改进，但下面的代码适用于你需要做的：

It could certainly be improved, but the following code works for what you need to do:

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

这篇关于循环“活动”类与旋转木马的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！