Javascript- Interactive Website: Flipboard, Previous slide 2


#1



My code isn't working for this section, I'm not sure what I'm doing wrong

Error message: Oops, try again. Make sure you have defined all the variables!


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(duration).removeClass('active-slide');
    prevSlide.fadeIn(duration).addClass('active-slide');
    });

    $('.arrow-prev').click(function() {
    var currentSlide = $('.active-slide');
    var prevSlide = currentSlide.prev();
    currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');
    
    
    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');
  });

$(document).ready(main);


#2

Hi @eragous,

Inside your click event listener for the previous arrow, you don't have the currentDot or nextDot variables created, so remove those two lines. Then, change nextSlide to prevSlide. And after that, change duration inside your next arrow click event listener to 600, and your code should work :slight_smile:


#3

Which, nextSlide do I have to change exactly?


#4

@eragous How many nextSlides do you see inside your $('.arrow-prev').click(...); part?


#5

Okay here is my code now, I'm getting the error message "Oops, try again. Make sure you have defined all the variables!". I'm not sure how to change the duration of the next arrow

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(duration).removeClass('active-slide');
    prevSlide.fadeIn(duration).addClass('active-slide');
    });

    $('.arrow-prev').click(function() {
    var currentSlide = $('.active-slide');
    var prevSlide = currentSlide.prev();
    currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');
    
  });

$(document).ready(main);

#6

@eragous Good, now you just need to change these two things:

  1. Inside $('.arrow-next').click(...);, change duration to the actual duration in milliseconds, 600.
  2. Then, inside $('.arrow-prev').click(...);, change the one remaining case of nextSlide to prevSlide

...and your code should work! Let me know if you have any more questions :slight_smile:

(also, my bad - I skimmed your code in my other post and for some reason only saw one nextSlide then. Sorry for confusing you :confused: )


#7

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