title: making a simple jQuery slider
body: <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>