0

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

Master Yoda
  • 4,334
  • 10
  • 43
  • 77
  • possible duplicate of [How do i get this javascript to run every second?](http://stackoverflow.com/questions/5638783/how-do-i-get-this-javascript-to-run-every-second) – Francisco Presencia Oct 19 '13 at 17:35

1 Answers1

1

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)

Bojana Šekeljić
  • 1,056
  • 1
  • 12
  • 30