9. Previous Slide 2


#1

var main = function() {
    $('.dropdown-toggle').click(function() {
        $('.dropdown-menu').toggle();
    });
    
    $('.arrow-next').click(function() {
        var currentSlide = $('.active-slide');
        var nextSlide = currentSlide.next();
        
        var currentDot = $('.active-dot');
        var nextDot = currentDot.next();
        
        if(nextSlide.length == 0) {
            nextSlide = $('.slide').first();
            nextDot = $('.dot').first()
        }
        
    currentSlide.fadeOut(600).removeClass('active-slide');
        nextSlide.fadeIn(600).addClass('active-slide');
        
        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');
        
        if(nextDot == 0) {
            nextDot = $('.dot').first();
        }
    });
    
    $('.arrow-prev').click(function() {
        var currentSlide = $('.active-slide');
        var prevSlide = currentSlide.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');
        
        if(nextDot == 0) {
            nextDot = $('.dot').first();
        }
    });
};

$(document).ready(main);

I don't understand which variables I haven't defined, can someone help me out?


#2

Hi Codemaster969,

You've forgotten to create currentDot and prevDot in your $('.arrow-prev').click(function() {...}); bit. Also, this:

if(nextDot == 0) {
    nextDot = $('.dot').first();
}

should be removed, both times it shows up.


#3

2 posts were split to a new topic: Exercise 9, getting told to fade out the current slide & remove the 'active-slide' class