9. Previous Slide 2


#1

Hi I have a problem with this code. The last slide slide is not diusplayed when I'm pressing the prev-arrow at the first slide...

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();   
    }
    
     $('.arrow-prev').click(function() {
  var currentSlide = $('.active-slide');
  var prevSlide = currentSlide.prev();

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

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

    
    currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');
    
    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');
    
    });

});




$(document).ready(main)


#2

Hi
it seems that you wrote your function arrow-prev INSIDE the function arrow-next. Write it instead in the following way

var main = (function() {
    $('.dropdown-toggle').click(function() {
       ...
    });

    $('.arrow-next').click(function() {
       ...
    }); # arrow-next is closed

    $('.arrow-prev').click(function() {
       ...
    }); # arrow-prev is closed
});

$(document).ready(main)