Previous Slide 2


#1

It keeps saying "Remember to fade out the current slide and remove the 'active-slide' class. I have tried to fix it but I can't figure it out.

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();

  if(prevSlide.length == 0) {
    prevSlide = $('.slide').last();
  }

  currentSlide.fadeOut(600).removeClass('active-slide');
  prevSlide.fadeIn(600).addClass('active-slide');
});
});
$(document).ready(main);

#2

Hi Blake,

I think that should be just the closing curly brace (}), since you're only opening a curly brace ({) on line 1 :slightly_smiling:


#3

Thank you for the help. I am however still having the same problem even after I made that change.


#4

@tagplayer98688 Hmm, it worked for me after making that change. Maybe you need to refresh the page? Sometimes the SCT won't realize you've changed the code :slightly_smiling:

If that doesn't do it, please post your modified code. Thanks :slightly_smiling:


#5

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();

    currentSlide.fadeOut(600).removeClass('active-slide');
    prevSlide.fadeIn(600).addClass('active-slide');
}
$(document).ready(main);

#6

@tagplayer OK, you need to remove the second closing curly brace after your if statement, then make the last three lines look like this:

  });
};

$(document).ready(main)

instead of this:

}
$(document).ready(main);

:slightly_smiling:


#7

Ok I did that I'm still having the same problem though

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();

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

});
};

$(document).ready(main);


#8

@tagplayer98688 OK, two more things and you should be able to pass :slightly_smiling:

On line 23:

$('.arrow-prev').click(function() {
                   // ↑ you're missing this

Then, inside that function above ↑, you need to check if prevSlide.length == 0, and if so, wrap around to the last slide. Like this:

if (prevSlide.length == 0) {
  prevSlide = $('.slide').last();
}

put it before you modify currentSlide and prevSlide. In the end, that entire part should look like this:

Spoiler!

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

I hope this helps, sorry it took so long to get the code working :confused:


#9

Thanks for helping me. I really appreciate it. You were a big help.


#12