Carousel not functioning correctly?


#1



https://www.codecademy.com/en/courses/web-beginner-en-seyrq/0/12?content_from=make-an-interactive-website%3Ajquery-effects


There are no error messages when I hit the save and submit button, but when I try to scroll through the images on the carousel it's not functioning. The previous arrow works just fine, it filters through all the images in reverse. But when I click the next arrow the dot does not move and neither does the current image. Sometimes when I hit the previous key then hit the next key it's like the images blur together. Selecting the previous key until it has returned to the first image then selecting the next key does not blur the images together, but the image remains on the first one. I don't know if it's something to do with my code or maybe a bug? I've been referencing previous posts and I think my code is fine but maybe another pair of eyes will see something I may be missing in the code.


Replace this line with your code. 
var main = function() {
  $('.dropdown-toggle').click(function() {
    $('.dropdown-menu').toggle();
  });

  $('.arrow-next').click(function() {
    var currentSlide = $('.activeSlide');
    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');

  });
};


#2
Have a close look

var currentSlide = $('.activeSlide');  // active-Slide  missed a -

#3

Oh I see, thank you, that did the trick.


#4

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