Question

I have written some code for a carousel but I think it needs a little work, firstly I will explain the DOM

container
images container
img
img
img
end images container
nav
left
right
end nav
end container

each img floats left but is a different width (Same height), I have used jQuery to get the width of the images container to be the same as the combined widths.

so this is my right click (haven’t done left yet)

$('#container .container-nav .container-nav-right').click(function(){
    var scrollAmount = $('.container-images img').width();
    $("#container .container-images").animate({'left':'-=' + scrollAmount}, 'slow');
});

so this moves the container div along by say 230px each time, but I want it to move it 230, 240, 260 etc based on the images being contained.

I also want to reset the code once we get to the last image.

I know there are loads of plugin’s out there but I want to try and understand this myself. I hope I’m explaining myself.

Anyone any ideas? or suggestions as to where I go from here?
Thanks for reading this!

Answer 1

A little code to help explain kinakuta’s answer:

var selectedImage = $('.container-images img:first');

$('#container .container-nav .container-nav-right').click(function(){
    var scrollAmount = selectedImage.width();
    $("#container .container-images").animate({'left':'-=' + scrollAmount}, 'slow');
    selectedImage = selectedImage.next();
});