Image Slider pagination

Question

Hi, I wish to create pagination for this image slider I am creating however I have no clue how to go about it. Could anyone help me out?

You can see the slider here:

http://matthewruddy.com/slider

Thanks in advance. Matthew.

Answer 1

Since you're using a currentimage variable to control the image you're looking at and moving to, you could do it by capturing the number that was clicked and making currentimage = number - 1. Then it would just be a matter of feeding it into an function that's similar to what you're already doing in nextnumber():

$('li.page').click(function(){
    // Get the clicked number
    var currentimage = parseInt($(this).text()) - 1;

    // Paging function similar to nextnumber()
    page(currentimage);
});

Answer 2

Here's my code & Demo : http://jsbin.com/apawe4

First identify the Index of li(.page) element and animate the element according to Element's Index. following code says what I'm talking about =)

$(document).ready(function(){
   var sliderwidth = 500;
  $('#navigation li').bind('click',function() {
   $('.slider').animate({left:"-" + sliderwidth * $(this).index() },1000);
  });
})