Jquery Slider using div and with pagination <p>I'm trying to create a image slider where in images are place inside a DIV.<br> 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.</p> <pre><code> &lt;a href="" id="show1"&gt;Move to first div&lt;/a&gt; &lt;a href="" id="show2"&gt;Move to center&lt;/a&gt; &lt;a href="" id="show3"&gt;Move to 3rd div&lt;/a&gt; &lt;div id="main-wrapper"&gt; &lt;div id="inner-wrapper"&gt; &lt;ul&gt; &lt;li&gt;&lt;div id="div1" class="divstyle"&gt;this is first&lt;/div&gt;&lt;/li&gt; &lt;li&gt;&lt;div id="div2" class="divstyle"&gt;this is second&lt;/div&gt;&lt;/li&gt; &lt;li&gt;&lt;div id="div3" class="divstyle"&gt;this is third&lt;/div&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>This is how I tested it in jquery.</p> <pre><code>$(document).ready(function(){ $('#show1').click(function() { $('ul li div').animate({ left: '-=450' }, 3000, function() { // Animation complete. }); }); }); </code></pre> <p>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?</p> <p>Basically this is what I'm trying to achieve. <br> <a href="http://theme.crumina.net/onetouch2/" rel="nofollow">http://theme.crumina.net/onetouch2/</a></p> <p><br><br> This is the css ,.</p> <pre><code>&lt;style&gt; .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; } &lt;/style&gt; </code></pre>