Previous Dot 2


#1

getting the mess Oops, try again. Remember to remove '.active-dot' from the current dot.

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

     
    currentSlide.fadeOut(600).removeClass('active-slide');
    prevSlide.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').first();   
     prevDot =$('.dot').first();
    }

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

});

};

$(document).ready(main);

Above is my Code not sure what is wrong, any ideas?


Previous Dot 2
#2

Hi this part

if(prevSlide.length == 0){
   prevSlide = $('.slide').first();   
   prevDot =$('.dot').first();
}

On $('.slide') and $('.dot') you should put .last() instead of first


#3

I have but am still getting the same error :confused:


#4

Can you post your new code ?


#5

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');
    prevSlide.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);

Thank you


#6

all your click function should be inside the main function then here

$('.dropdown-toggle').click(function(){
    $('.dropdown-menu').toggle();

and your $(.arrow-next) and $(.arrow-prev) shouldn't be inside the (.dropdown-toggle)
so you should close it like that

$('.dropdown-toggle').click(function(){
    $('.dropdown-menu').toggle();

});

and remove one }); you have at the end of your code


#7

Awesome Works perfect now thank you :slight_smile: