Previous Slide 2


#1

Hey All, I'm having issue with my code and it's getting frustrating. I keep getting an error saying, "Remember to remove 'Active-dot' from the current dot."


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

$(document).ready(main);


#2

Hi @jumpin_flash,

Check that you've closed all of your opening quote marks — syntax highlighting should help with this by coloring everything after you miss a closing quote the color of a string (on these forums, red) :slight_smile:


#3

Thanks for the help, but now I'm getting an error saying "Make sure you defined all your variables"

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

$(document).ready(main);

#4

@jumpin_flash Inside your $('.arrow-prev').click(...); part, you never actually create the currentDot and prevDot variables. Also, when you change the class on the dots, you need to replace nextDot with prevDot :slight_smile:


#5

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