7. Next dot 2


#1

I can't find the mistake in my code, but the dots refuse to obey me. I tried putting the if statement in different places in the code, but nothing seems to work. Please help. Here's my code:

var main = function() {

    $('.dropdown-toggle').click(function() {
        $('.dropdown-menu').toggle();
    });
    
    $('.arrow-next').click(function() {
        
        var currentSlide = $('.active-slide');
        var nextSlide = currentSlide.next();
        
        if(nextSlide.length == 0) {
            nextSlide = $('.slide').first();
            nextDot = $('.dot').first();
        }
                
        currentSlide.fadeOut(600).removeClass('active-slide');
        nextSlide.fadeIn(600).addClass('active-slide');
                
        var currentDot = $('.active-dot');
        var nextDot = currentDot.next();
        
        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');
        
    });
};

$(document).ready(main);

#2

I've the same problem, my code looks to be the same :

var main = function() {
    $('.dropdown-toggle').click(function() {
        $('.dropdown-menu').toggle();
    });
    $('.arrow-next').click(function() {
      var currentSlide = $('.active-slide');
      var nextSlide = currentSlide.next();
      if(nextSlide.length == 0) {
        nextSlide = $('.slide').first();
        nextDot = $('.dot').first();
      }
      currentSlide.fadeOut(600).removeClass('active-slide');
      nextSlide.fadeIn(600).addClass('active-slide');
      var currentDot = $('.active-dot');
      var nextDot = currentDot.next();
      currentDot.removeClass('active-dot');
      nextDot.addClass('active-dot');
    });
};
$(document).ready(main);

#3

Try moving these two lines up, to above the if statement:

        var currentDot = $('.active-dot');
        var nextDot = currentDot.next();

#4

Hey Celina,

I understand your frustration, - programming gets really difficult at times - but these forums need to stay clean, so I've edited your post slightly.

As for the problem in your code, you need to define current and nextDot right after current and nextSlide. So the general structure of that bit looks like this:

$('.arrow-next').click(function() {
  var currentSlide = /* ... */;
  var nextSlide = /* ... */;
  var currentDot = /* ... */;
  var nextDot = /* ... */;
  
  // the other stuff
});

Edit:
@mtf was just a little quicker replying than I was :angry: :smile:


#5

Thanks,
that worked :wink:
Finally it's logical


#6

Thanks a lot everyone! Now it's working! :smile:


#7

Thank you so much :joy: i was about ready to give up.