Question

I’m making a sliding image gallery where there are 3 pages with 3 images per page. All the images are placed inside an <ul> container. When you click the “next” button, the next 3 images slide into view and when you click the “prev” button, the previous 3 images slide into view. I’ve tried to make it so that when you get to the last three images, clicking the “next” button doesn’t do anything, and when you are viewing the first three images, clicking the “prev” button doesn’t do anything.

The problem is that the images aren’t sliding where they are supposed to. For example, if I am on the first page and I press “next”, then press “prev”, and then finally press “next” again, the <ul> image container will slide to the last page, not the second page; if I click “next” the third time, the image container will slide all the images out such that you only see <ul> container’s blank space.

here’s the jsfiddle:

jsfiddle

Answer 1

You need to calculate the move_distance outside the prev and next functions, because it has to be the same value for both functions. Also you should add a control to next function just like you did with prev function, so the function should stop if no pages are left.

I changed first and ninth pictures with numbers so it’s easier to see what’s going on. You can see the result here: http://jsfiddle.net/keune/DWrnb/30/