10. Previous Dot 1


#1



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

I can't figure out what I'm doing wrong; my code is identical to the example

"Oops, try again. It looks like previous arrow isn't moving back to the previous dot. Look back at the instructions and check the $('.arrow-prev').click() event handler"


var main = function (){
     $('.dropdown-toggle').click(function(){
$('.dropdown-menu').toggle();
});

$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();

if(nextSlide.length == 0) {
nextSlide = $('.slide').first();
}

currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});

$('.arrow-prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();

    if(prevSlide.length == 0) {
    prevSlide = $('.slide').last();
    }

currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');

currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});

}

$(document).ready(main);


#2

This part of your code it's missing some variables

....
        $('.arrow-next').click(function() {
            var currentSlide = $('.active-slide');
	    var nextSlide = currentSlide.next();
		
	    if(nextSlide.length == 0) {
		nextSlide = $('.slide').first();
	    }
		
	    currentSlide.fadeOut(600).removeClass('active-slide');
	    nextSlide.fadeIn(600).addClass('active-slide');
	});
....