Next Dot 2 Flipboard 7

#1



https://www.codecademy.com/courses/web-beginner-en-seyrq/0/7?content_from=make-an-interactive-website%3Ajquery-effects#


I am unable to get my dot to wrap around back to the first dot. I am sure it is a syntax issue but I cannot see where I am making the mistake


var main = function() {
    $('.dropdown-toggle').click(function() {
        $('.dropdown-menu').toggle();
        });
    $('.arrow-next').click(function(event) {
        var currentSlide = $('.active-slide');
        var nextSlide = currentSlide.next();
               var currentDot = $('.active-dot');
        nextDot = currentDot.next();
        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');
              
               if (nextSlide.length == 0) {
           nextSlide = $('.slide').first();
           nextDot = $('.dot').first();
        }
        
       
        
        currentSlide.fadeOut(600).removeClass('active-slide');
        nextSlide.fadeIn(600).addClass('active-slide');
        });
};

$(document).ready(main);

#2

I have tried it with the if statement before and after the variable declaration both yield the same results

#3

Hi
I see two things that are incorrect :

1) you forgot to put a var in front of nextDot = currentDot.next();

2) the two lines

currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');

should be written after the if (nextSlide.length == 0). Indeed, in the current state of the code, you change the class of the current/next dots without checking if it is the last one.