Previous Slide 2


#1



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


(Oops, try again. Remember to fade out the current slide and remove the 'active-slide' class.) Tried looking for an error but i can't find any. Any help is appreciated :slight_smile:


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

});
}

$(document).ready(main);


#2

Hey @dannymulleny,
it seems to me, like you got the previous-arrow inside of the next-arrow click() event-handler.

Don't worry, I made the same mistake on my first try :stuck_out_tongue:
To solve your issue, just push it down
(Simply take the closing curly bracket and the parantheses with the semicolon }); from below your .arrow-prev-function and put it right before it)
and if you got it correct it should look something like this:

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');
    }); // Place it here

    $('.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');       
    });
    // Cut it out from here
}

$(document).ready(main);

Hope that I could help you :slight_smile:


#3

Omg thanks man! I knew it had to be the brackets just couldn't figure out where i messed up. Thanks so much it works!


#4

That sounds great.
If you got further questions, feel free to get in touch with me :smiley:
Make sure to mark my post as solution, so others which face the same
issue will be able to take it as a reference :wink:
Greez, 0xB4DC0DED


#5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.