单击“下一个”和“上一个”时，如何从导航菜单中添加和删除类

我试图用Javascript实现一个旋转木马，但导航按钮有问题。当它们各自的图像显示时，我想将一个类添加到这些项目（.cab点导航项目）中。

当我点击导航菜单时，我想好了如何做到这一点，但我在Prev和Next按钮上遇到了问题。

你可以在jsfiddle 上看到完整的代码

这是javascript文件：

$(document).ready(function() {

    var carouselItems = [
        { src: "http://placehold.it/600x300/cccccc/000000", title: "Sample 01" },
        { src: "http://placehold.it/600x300/f45a45/000000", title: "Sample 02" },
        { src: "http://placehold.it/600x300/b78d65/000000", title: "Sample 03" },
        { src: "http://placehold.it/600x300/666aa0/000000", title: "Sample 04" },
        { src: "http://placehold.it/600x300/cccddd/000000", title: "Sample 05" }
    ];
    Carousel = function() {
        // keep track of the current position
        var position = 0;
        // build carousel based on items in the carouselItems array
        $(carouselItems).each(function(index, value){
            var li = $('<li/>');
            li.addClass('carousel-item');
            li.css('width', 100 / carouselItems.length + '%');
            li.appendTo($('#carousel'));
            var img = $('<img/>');
            img.attr('src', value.src);
            img.attr('title', value.title);
            img.appendTo(li);
            var liDot = $('<li/>');
            liDot.data('position', index); // Store the position of the respectives images & dots
            liDot.data('title',value.title); //Store the image titles on each dot instance
            liDot.addClass('carousel-dots-nav-item').html('o');
            liDot.appendTo($('#carousel-dots-nav'));
        });
        //increase width of the carousel
        $('#carousel').css('width', carouselItems.length * 100 + '%');
        //add events to dots
        for (i = 0; i < $('.carousel-dots-nav-item').length; i++) {
            var dot = $('.carousel-dots-nav-item')[i];
            // show the title of the image when hovering the associated dot
            $(dot).hover(function(e){
                //$('#title').text(carouselItems[i].title);
                $('#title').text($(this).data('title'));
            }, function(e){
                $('#title').text('');
            });
            // move to the appropriate slide when a dot is clicked
            $(dot).click(function(e){
                //position = i; //i -> $('.carousel-dots-nav-item').length
                var position= $(this).data('position');  //Position based on the index
                $('.active').removeClass('active'); //Reset classes .active from all dots
                $(this).addClass('active'); //Add class .active to clicked dot
                $('#carousel').animate({
                    left: -position * 100 + '%'
                }, 500);
            });
        }

        // add click event to next button
        $("#next").click(function(e){
            e.preventDefault();
            if (position == carouselItems.length - 1) return;
            $('.active').removeClass('active');
            position++;
            //$('.carousel-dots-nav-item').data('position');
            $('#carousel').animate({
                left: -position * 100 + '%'
            }, 500);
        });
        // add click event to previous button
        $("#previous").click(function(e){
            e.preventDefault();
            if (position == 0) return;
            $('.active').removeClass('active');
            position--;
            $('#carousel').animate({
                left: -position * 100 + '%'
            }, 500);
        });
    };
    var carousel = new Carousel();
});