Jquery Slider using div and with pagination

Question

I'm trying to create a image slider where in images are place inside a DIV.
So basically, I have 3 divs, they can be control using a href html, the first one, its function will move to the first div, second move to center div, and last move to the 3rd div the last one. I think this is called pagination? Correct me if I'm wrong. I did not place an image on the div to simplify the codes.

    <a href="" id="show1">Move to first div</a>
    <a href="" id="show2">Move to center</a>
    <a href="" id="show3">Move to 3rd div</a>

    <div id="main-wrapper">
    <div id="inner-wrapper">
            <ul>
                <li><div id="div1" class="divstyle">this is first</div></li>
                <li><div id="div2" class="divstyle">this is second</div></li>
                <li><div id="div3" class="divstyle">this is third</div></li>
            </ul>

    </div>
   </div>

This is how I tested it in jquery.

$(document).ready(function(){

$('#show1').click(function() {
  $('ul li div').animate({
   left: '-=450'
  }, 3000, function() {
  // Animation complete.
  });

});     

});

I used the selector (ul li div) and used animate(), I tested a simple moving to the left, but it is not working. Any idea on this one?

Basically this is what I'm trying to achieve.
http://theme.crumina.net/onetouch2/

This is the css ,.

<style>
    .divstyle 
    {

        text-align: center;
        width:450px;
        height:300px;
        border:1px solid #000;  


        margin: auto;
    }

    #inner-wrapper ul li
    {
        list-style:none; 
        position:relative;
        float:left;


    }
    #inner-wrapper li

    {
        display: inline;
    }


    #main-wrapper
    {
        position: relative;
        overflow:hidden;
        width:100%;
        border:1px solid #000;
        height: 350px;
        float:left;
    }

    #inner-wrapper
    {

        display: table;   /* Allow the centering to work */
        margin: 0 auto;
        position: relative;
        height: 300px;
        width:500px;
        border:1px solid #000;

        overflow: hidden;

    }



</style>

Answer 1

Demo

First you need to refactor your html like;

<a href="#" data-id="-450" class="paginate">Move to first div</a>
    <a href="#" data-id="0" class="paginate">Move to center</a>
    <a href="#" data-id="+450" class="paginate">Move to 3rd div</a>

    <div id="main-wrapper">
    <div id="inner-wrapper">
            <ul>
                <li><div id="div1" class="divstyle">this is first</div></li>
                <li><div id="div2" class="divstyle">this is second</div></li>
                <li><div id="div3" class="divstyle">this is third</div></li>
            </ul>

    </div>
   </div>

As you can see I have put position value in data-id, and added # to href links. And your js will be;

$('.paginate').click(function(event) {
    event.preventDefault();
    var amount = $(this).data("id");
  $("#main-wrapper").animate({
   left: amount
  }, 1000, function() {
  });

}); 

Answer 2

You should uniquely identify the div tio apply animation. also you have to make the position absolute. Try the below code

$('#show1').click(function() {    
  $( "#div1" ).animate({ "left": "+=50px" }, "slow" );
});     

CSS:
 .divstyle {    position: absolute;    background-color: #abc;    left: 50px;  }

Check it here :http://jsfiddle.net/2N76g/

Answer 3

$('#show1').click(function() {
  $('div').animate({
   left: '-=450'
  }, 3000, function() {
  // Animation complete.
  });

});  

Demo