Interactive Website: 7. Next dot 2 - can you help me see what's wrong


#1



"Interactive Website: 7. Next dot 2"
Hello. I'm hoping someone can lend me a second set of eyes for this exercise.


I'm getting an error: "Oops, try again. 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"

The images flip through correctly, but I can't get the dots to restart at the beginning. I'm using the same logic for both lines of code. When I finally gave up, I tried looking at the hint and doing a copy/paste over my code, and it didn't make a difference.

Any advice would be appreciated.
Thank 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').removeClass('active-dot');
        var nextDot = currentDot.next().addClass('active-dot');
        
        if (nextSlide.length === 0) {
             nextSlide = $('.slide').first();
             nextDot = $('.dot').first();
        }

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


#2

@mstraube,

+++++ 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

Thank You. Thank You. I feel silly.
Of course my code won't trigger if I put it before the IF statement.
Lesson learned from this - when you can't see the forest for the trees, step back.
I was so busy reviewing the lines of code I missed the big picture.


#4

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