Previous Dot 2 Asking to add active-dot to prevDot even after adding it

jquery

#1

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

    currentSlide.fadeOut(600).removeClass('active-slide');
    prevSlide.fadeIn(600).addClass('active-slide'); 
    
    var currentDot = $('.active-dot');
    var prevDot = currentDot.prev();
    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');
});

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

#2

Hey @terablaster81305! So your problem is that you always have to put the variables on top so the ones on bottom can use them. Here is your problem:

You cant have your currentDot variable and Prevdot variable be on bottom so rearange them to the top like this:

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

Hope this helped! If it didnt please reply saying so.


#3

Thanks @amanuel2
It worked :joy: