How do I add and remove classes from the navigation menu when clicking on next and previous?

Question

I'm trying to implement a carousel with Javascript but I'm having trouble with my navigation buttons. I want to add a class active to those items (.carousel-dots-nav-item) when their respective images are showing.

I figured out how to do it when clicking on the navigation menu but I'm having trouble with the Prev and Next buttons.

You can see the full code at jsfiddle

Here is the javascript file:

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

Answer 1

Hi please check updated code on jsfiddle

$('#carousel-dots-nav li').eq(position).addClass('active');