jquery infinite slider images

Question

I\'m trying to create an infinite slider using jquery. My page has some tags, with the width equal to the window width.

I want to slide every image after 10 seconds

Answer 1

Here is a FIDDLE that will get you started.

1. Put all your images in a hidden div

2. Clone them and put them in the visible div

3. Animate the image by changing the left margin

4. You can adjust the time between images by the set interval function

5. You can adjust the slidein time by the animate time.

6. Because it's an infinite loop, I put the button in to stop the animation any time you want.

JS

var pictxtnumber = 1;
loadpictxt(pictxtnumber);

var fadeintime = 500;
animatediv();

function animatediv()
{
    var number = 0;
    var interval = setInterval(function() { 
                                           pictxtnumber = pictxtnumber + 1;
                                           if(pictxtnumber > 6)
                                             {
                                              pictxtnumber = 1;
                                              }
                                           loadpictxt(pictxtnumber);
                                           $('#stopanim').on('click', function(){
                                                                                 clearInterval(interval);
                                                                                 });
                                           }, 1000);
}

function loadpictxt(num)
{
  $('.picturediv').html('');
  $(".hiddenimage img:nth-child(" + num + ") ").clone().appendTo('.picturediv');
  $('.picturediv img').css('margin-left', '100px');
  $('.picturediv img').animate({marginLeft: "0"}, 100);    
}