Interactive website part 11


#1

I cant figure out why the active dot class isn't removed when I hit the back arrow, please help me out here.

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 = $('.active-slide').prev();
    
    var currentDot = $('.acive-dot');
    var prevDot = $('.active-dot').prev();

    
    if (prevSlide.length == 0){
        prevSlide = $('.slide').last();
        prevDot = $('.dot').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

Hey again Alexander :)

The problem this time is really subtle. Line 30, .acive-dot needs to be .active-dot.
Took me a while to find it!


#3

I was hoping the problem would really be that small but even after fixing it I'm still getting the same error when I submit it and the back arrow doesn't animate the slider dots either.


#4

It worked for me just changing that. Could you try switching browsers?


#5

I tried it in Firefox, chrome and microsoft edge, all came up with the same error.


#6

That's really odd :confused:
Could you post your updated code?


#7

This is my most up to date code:

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 = $('.active-slide').prev();
    
    var currentDot = $('.active-dot');
    var prevDot = $('.active-dot').prev();

    
    if (prevSlide.length == 0){
        prevSlide = $('.slide').last();
        prevDot = $('.dot').last();
    }
    
    currentDot.removeClass('.active-dot');
    prevDot.addClass('.active-dot');
    
    currentSlide.fadeOut(600).removeClass('.active-slide');
    prevSlide.fadeIn(600).addClass('.active-slide');
    

});

}

$(document).ready(main);


#8

Lines 39, 40, 42, and 43 shouldn't have the dot (.) in front of active-. Line 39 for example, should look like this:

currentDot.removeClass('active-dot');

:)


#9

It finally worked and I'm livid that such a small thing was effecting it, but thankfully it does work now. Thanks again for helping me again :smile:


#10

function main(){
$('.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();
var currentDot=$('.active-dot');
var prevDot=currentDot.prev();
if(prevSlide.length == 0){
prevSlide=$('.slide').last();
prevDot=$('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
};
$(document).ready(main);

:sweat: This took me forever, Just make sure to carefully read over your script