making a simple jQuery slider
<p>I'm trying to teach myself javascript/jquery so I set myself a project to create a very basic slider for my website. Using Codeacademy's and the jQuery API library I've got myself familiar with the code but am having difficulty getting to grips with the syntax. I am, therefore, coming here to seek help by means of somebody spell-checking my efforts.</p>

<p>Here's the code:</p>

<p>CSS:</p>

<pre><code>#wrapper { width: 500px; height:300px; display: block; overflow: hidden; }
#slider {width: 1500px; clear: both; margin-left:0;}
.content {float: left; width: 500px; height: 300px; display: block; background:grey;}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div id="wrapper"&gt;
    &lt;div id="slider"&gt;
        &lt;div class="content"&gt;&lt;p&gt;blah&lt;/p&gt;&lt;/div&gt;
        &lt;div class="content"&gt;&lt;p&gt;blah&lt;/p&gt;&lt;/div&gt;
        &lt;div class="content"&gt;&lt;p&gt;blah&lt;/p&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;button id="left"&gt;left&lt;/button&gt;
&lt;button id="right"&gt;right&lt;/button&gt;
</code></pre>

<p>and finally:</p>

<pre><code>$#left.click(function {
if ($('#slider').css('margin-left').between(0,-1500)) {
    $('#slider').animate({
        margin-left : "+=500"
    }, 500);
});

}
}
</code></pre>

<p>which translates to moving the 1500px-wide div containing the images left by 500px when a button is clicked. The slider is within a container div which has a 500px width and hidden overflow. The if statement is to make sure the div does not continue traveling left after it has reached the end of the container div</p>

<p>I'm entirely grateful to anyone who can help with this rather selfish request</p>
