What am I missing? 7. Next Dot 2


#1



I don't know what I am missing, can someone tell me what I am doing wrong?

When on the last slide, it looks like next arrow isn't wrapping back to the first dot. Look back at the instructions and check the code inside the if statement.

var main = function(){
//toggle menu
$('.dropdown-toggle').click(function(){
    $('.dropdown-menu').toggle();
});
//use arrows to move pictures 
$('.arrow-next').click(function(){
    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();
    
    //if last slide will return to the first slide 
    if (nextSlide.length == 0){
        nextSlide = $('.slide').first();
        nextDot = $('.dot').first();
    
    }
    //moves the current slide to the next slide
    currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');
    
    //moves active state of dots when the arrow is pressed 
    
    var currentDot = $('.active-dot');
    var nextDot = currentDot.next();
    
   
    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');
    
  
    
});


};

$(document).ready(main);


#2

@trojankai,

+++++ flipboard the next && prev steps
You will have to keep a strict order in your code.....

s t e p s - - f o r - - n e x t S l i d e
-1
-1a create a selection of nextSlide (2 steps, capture 'active-slide, capture next() slide )'
-1b create a selection of nextDot
-2 check if selection of nextSlide is EMPTY
-2a if EMPTY change nextSlide selection to first slide
-2b and change nextDot selection to first Dot
-3 swap -active-slide- and -active-dot- class from current to next
Step3 is done by

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

s t e p s - - f o r - - p r e v S l i d e
-1
-1a create a selection of prevSlide
-1b create a selection of prevDot
-2 check if selection of prevSlide is EMPTY
-2a if EMPTY change prevSlide selection to last slide
-2b and change prevDot selection to last Dot
-3 swap -active-slide- and -active-dot- class from current to prev
Step3 is done by

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

+++++++++++++++++++++++++++++++++++++
++ jquery length explained AND DOM pictures of flipboard
https://www.codecademy.com/forum_questions/5615308ab62548021c0000e4


#3

you Sir, are a life-saver.

Thank you!


#4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.