9/1 Previous Slide 2


#1

Hi everyone,

I cannot figure out what is wrong with my code here. I successfully completed the previous exercise without an issue; I added the new IF statement and receive this error:

Oops, try again.
Remember to fade out the current slide and remove the 'active-slide' class.

Can anyone take a second look and see what I'm missing?

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 == 0){
             prevSlide = $(".slide").last();   
            }
        
        currentSlide.fadeOut(600).removeClass("active-slide");
        prevSlide.fadeIn(600).addClass("active-slide");
        
        
        
        };);






});
$(document).ready(main);

#2

Hi ApeironDon,

You need to move the closing curly brace (}) on line 5 down to just before the last line, and you need a closing parenthesis ()) when you close your $('.arrow-next').click(function() {...}); bit.
You also probably should remove the first semi-colon (;) here:

I hope this helps! :slightly_smiling:


#3

@zystvan It seems I'm still running into the same issue with those corrections. I'm missing something, but I am not sure what it is.

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 == 0){
         prevSlide = $(".slide").last();   
        }

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



    });

)};
$(document).ready(main);


#4

Much better, but you forgot the first thing :slightly_smiling:
The last line four lines should go like this:

  }); // $('.arrow-prev').click(...);
} // main() - you're missing this

$(document).ready(main);

#5

@zystvan Thanks for the help on this one! I'm still receiving the same error despite the changes. Anything else you can recommend?

Also, can you provide some insight as to how everything functioned properly in the last exercise, but when I added only the IF statement, it fails to pass through?


#6

@apeirondon Sorry, I missed some stuff in your code.

Remove the first closing parenthesis so it looks like this:

};
$(document).ready(main);

Then,

Try comparing that to your if statement for nextSlide, and see if you can find the difference causing the problem :wink:

Hint

It needs to check the length of prevSlide so it should be like:

if (prevSlide.length == 0) {
             // ↑ this bit


Well, was everything working in the previous exercises, or were you just getting passed? Because there's a difference. The SCT (Submission Correctness Test; code checker) can't catch everything.
But also, since the app.js file gets linked up at the end of the HTML, should have* loaded, $(document).ready(...); is just a precaution, so since everything will have probably loaded by then, $('.arrow-next').click(...) should still work, even if it's not in main().

Does that help you?


#7

Oh man, I can't BELIEVE I missed the .length method on there. I combed through the code so many times and grazed over that every single time.

I appreciate all of your help @zystvan !