CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Master Yoda
Master Yoda

Reputation: 4412

auto increment image in Image slider in JQuery

Im trying to get an image slider in JQuery to move to the next image after around 2 seconds, ive tried creating a function that should do this on document load but i cant figure it out at all after about 3 hours of exhaustive Googling.

Is there a JQuery class which does this cos i cant find one...

my code for this so far :

        $('.slider img:first').addClass('active');                    

        var imagewidth = $('.visible-area').width();                  
        var totalimages = $('.slider img').size();                    
        var sliderwidth = imagewidth * totalimages;                   
        $('.slider').css({'width': sliderwidth}); 


        function autoImage()
        {
            nextImage();
        }

        function nextImage()
        {
            $active = $('.slider img.active').prev();                 
            if ($active.length==0){                                    
                $active = $('.slider img:last');
            }
            $('.slider img').removeClass('active');                   
            $active.addClass('active');                               

            var count = $active.attr('alt') -1;                       
            var sliderposition = count * imagewidth;                  
            $('.slider').hide();
            $('.slider').animate({'left': -sliderposition}, 500).fadeIn(1000);  
    }

thanks

Upvotes: 0

Views: 484

Answers (1)

Bojana Šekeljić
Bojana Šekeljić

Reputation: 1056

I believe that you have problem with your variables declarations.

From the jQuery Api Documentation:

The .size() method is deprecated as of jQuery 1.8. Use the .length property instead.

So use that instead for var totalimages

Try logging on several breakpoints to isolate problematic area(s)

Upvotes: 1

Related Questions