Lesson 9: Prev slide 2


#1

I've posted about this before and I got no straight answer. When I said I didn't understand what someone said, the post got left with no further replies. I would like a straight answer to this please.

The error I'm getting is this:
Oops, try again. Remember to fade out the current slide and remove the 'active-slide' class.

I'm also getting this Syntax error: Uncaught SyntaxError: Unexpected token .

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


#2

The extra dot will cause a problem.


#3

Thanks. I don't know why I couldn't see that one. Now I'm still getting the same error:
Oops, try again. Remember to fade out the current slide and remove the 'active-slide' class.

But now the Syntax error is this: Uncaught SyntaxError: Unexpected end of input


#4

The main() function body is still not closed. Add a closing curly brace at the end.


#5

Added but still getting the same error.


#6

Let's have one more look at your current code, please.


#7

var main = function() {
  $('.dropdown-toggle').click(function() {
    $('.dropdown-menu').toggle();
}                                           // } does not belong
  });

  $('.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');
    nextSlide.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');
 });
                                               // }; missing here
$(document).ready(main);

#8

Please see the two line I commented in the code above.


#9

Thank you! That worked.