I’m just finishing a website off for a client. Its almost finished, just need to work on some backwards compatibility and the menus are probably littered with grammatical/spelling errors. I apologise in advance. http://greygoosegilmorton.co.uk (domain not fully propagated yet, if it doesn’t say AEM Design on the bottom of the page, its the wrong site)
I’m just not very proud of my work with the image scroller. It seems a bit hacky at the moment. Whats the best way of achieving this? Below is my current code..
var images = []
var imagewidth = $('#images').find('li').width();
$('#images').find('li').each(function(i) {
images[i] = '' + $(this).html() +''
})
var imagelength = images.length
var total = 1
function animateslider() {
$('#images').stop().animate({'marginLeft' : -(total*imagewidth)},8000,'linear',function() {
total = total + 1
$('.slider').append(images[(total) % imagelength])
if (total > 5) {
$('.slider').find('li').eq(total-5).empty()
}
if (total > 60) {
} else {
animateslider()
}
})
}
It stops after 60 to avoid using too much memory… The problem is sometimes it bugs out and you start seeing the process on the right of the screen and the white space catches up until you can’t see any images any more. I feel there is a much more efficient way which I’m missing.
