(9/12)


#1

I've tried a multitude of things and I can't seem to be able to figure this out :stuck_out_tongue: (I'm 99% finished with the lesson)

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

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

currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
if(nextSlide.length == 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();

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

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

currentSlide.fadeOut(duration).removeClass('active-slide');
prevSlide.fadeIn(duration).addClass('active-slide');
});
$(document).ready(main);


#2

I think you're just missing some of the closing brackets and the parameters for the .fadeOut(); and .fadeIn(); towards the end of your code. Hopefully the fixes below help you!

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

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

currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
if(nextSlide.length == 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
} <--to close your if/else statement
}); <-- to close the 'arrow-next click event handler'
$('.arrow-prev').click(function() {
var currentSlide = $('active-slide');
var prevSlide = currentSlide.prev();

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

currentSlide.fadeOut(duration).removeClass('active-slide'); <--missing numbers here!
prevSlide.fadeIn(duration).addClass('active-slide'); <--missing numbers here!
});
}; <-- to close main();

$(document).ready(main);


#3

Well I did exactly what you said but it still says "Oops, try again. Remember to fade out the current slide and remove the 'active-slide' class."


#4

See if this helps resolve the issue!

...
$('.arrow-prev').click(function() {
var currentSlide = $('.active-slide'); <--Try swapping this line in. I just added the missing dot in front of 'active-slide', which tells the browser that it's a class
var prevSlide = currentSlide.prev();

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

currentSlide.fadeOut(duration).removeClass('active-slide'); <--missing numbers here!
prevSlide.fadeIn(duration).addClass('active-slide'); <--missing numbers here!
});
}; <-- to close main();

$(document).ready(main);


#5

Can anyone assist me on this? Cant seem to get it working.....

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(duration).removeClass('active-slide');
prevSlide.fadeIn(duration).addClass('active-slide');

});

}

$(document).ready(main);


#6

Is your error message stating that you haven't defined all of the variables?
I'm having the same trouble. When I alter duration to 600 it tells me I haven't inserted the fadein/out command.


#7

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.

What is not right?

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 = $('.active-dot').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);


#8

try adding dots to 'active-slide' in currentSlide and prevSlide, this action worked for me. If it still doesn't work also try to add dots to 'active-slide' in currentSlide and nextSlide. Hope that got things working.