9. Previous Slide 2 -


#1

I have got really confused and am not sure what I've done wrong here, :grimacing: Any help is welcome and much appreciated.

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').removeClass('active-dot');
        var nextDot = currentDot.next().addClass('active-dot');
    });
        
        $('.arrow-prev').click(function() {
        
        var currentSlide = $('.activeSlide');
        var prevSlide = currentSlide.prev();
        
        if (prevSlide.length == 0) {
           prevSlide = $('.slide').last();
        }
        
        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');
            
        });    
    }      
  })
};

$(document).ready(main);

#2

Hey Ellale,

It looks to me like you've got a couple extra closing curly braces (}) and parenthesis ()) at the end of your code. If you use proper indentation, it'll be much easier for you to spot which ones don't belong there. It looks to me like:

        }); // ← closes `$('.arrow-prev').click(...);` - keep it
    } // ← closes `main()` - keep it
  }) // ← this should be removed
}; // ← this should be removed


#3

Ok, I removed the extra curly braces and parenthesis but it still isn't working :confused: I think the code is correct as I have checked it over several times but it just keeps telling me to fade out the current slide and remove the 'active-slide' class... I've put the edited code below in case anyone finds any other errors. Thank you!

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').removeClass('active-dot');
    var nextDot = currentDot.next().addClass('active-dot');
    
    $('.arrow-prev').click(function() {       
     
    if (prevSlide.length == 0) {
        prevSlide = $('.slide').last();
    }
    
    currentSlide.fadeOut(600).removeClass('active-slide');
    prevSlide.fadeIn(600).addClass('active-slide');
    
    var currentSlide = $('.activeSlide');
    var prevSlide = currentSlide.prev();  
    
});

}

$(document).ready(main);


#4

OK, you need to make sure you're closing $('.arrow-next').click(...); & the if statement inside of that. Here's a rough skeleton of how your code should look like if that didn't make sense:

var main = function() {
  // ...

  $('.arrow-next').click(function() {
    // ...
    
    if (nextSlide.length == 0) {
      // ...
    } // ← closes the `if` statement - you're missing this
  }); // ← closes `$('.arrow-next').click(...);` - you're also missing these

  $('.arrow-prev').click(function() {
    // ...
  });
}

#5

Thank you so much! I was stuck on that for ages