11. Previous dot 2


#1

Error: Oops, try again. Remember to remove '.active-dot' from the current dot.

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

}

$(document).ready(main);


#2

You didn't close your code properly. You are missing ); after your last } and then you need one more } after it and before $(document).ready(main);. I think this is it, code seems fine otherwise.

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

  });
}

$(document).ready(main);

#3

I have the same problem

var main = function() {
// Toggles dropdown menu.
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
// "Next Arrow" function
$('.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();
}
// Animated dots for the carousel.
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');

    var currentDot = $('.active-dot');
    var prevDot = currentDot.prev();

    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');

});

};

$(document).ready(main);


#4

@designblaster95646 You said you figured it out in one of your other topics... ??