Next Slide 2


#1



var main = function() {
    $('.dropdown-toggle').click(function(){
        $('.dropdown-menu').toggle();
    });
    
    $('.arrow-next').click(function() {
        var currentSlide = $('.active-slide');
        var nextSlide = currentSlide.next();
         if(nextSlide.length === 0) {
            nextSlide = $('.slide').first();
        }
        currentSlide.fadeOut(600).removeClass('active-slide');
        nextSlide.fadeIn(600).addClass('active-slide');
       
    });
}

$(document).ready(main);

This code works but when i move the if statement like that it does not, can someone explain me wht?

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


#2

Maybe it's because since jQuery interprets your code line by line, when you reach the end it shorts out. Try putting you if statement after var nextSlide = currentSlide.next() but before currentSlide.fadeOut()...

Regards,
Barry Allen


#3

Hi @yacamx,

The first version of your code should work fine. What's the error message you're getting?


#4

Yes it does, I just cannot understand why the if statement does not work when it's at the end(2nd code) and works when its after the var (1st code). What is the differance? Thers no error messages.


#5

jQuery interprets code line by line. So you should first check whether currentSlide is the last slide, and then put you normal code into action. Hope this helps...

Regards,
Barry Allen


#6

Yes, thank you for quick help:)


#7

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