Question

Im trying to create a continuous slider image, that loops itself, I have succeeded in getting it to work, but am now faced with the problem that there is a large part of the transition with blank space until the image circles round again

I’m looking for a way that I can get the image to loop end to end so there is no gap in the transition, thanks in advance

http://jsfiddle.net/Antifaith/tqBMQ/

EDIT:

Ok, I tried it with seperate images but it was making my brain bleed, so I’ve taken another approach, trying to fire an if statement when it reaches a certain position in the animation – only problem is now it fires slidetown(); a bazillion times a second and stops it working – I’ve been assigned to something else this morning and could really use some help!

http://jsfiddle.net/Antifaith/tqBMQ/1/

$(document).ready(function slidetown(){
$('.rotation').animate({'left' : '960px'} , {

    duration: 15000, 
    easing : "linear",
    complete: function() {
      $(this).css('left','-2028px');
      slidetown();
    }
  });
 var pos = $('.rotation').position();
        if (pos.left < 0) {
           slidetown();
        }
});

Answer 1

I think the trick might be to use multiple images instead of one big one. The issue you’re running into is the animation won’t restart until the image is off the 960px area you designated for the animation.

But, if you cut the image in the right spots (I recommend figuring out logical, contextual break-ups in the image), the first image should be off the page by the time it comes around to it again in the sequence.