title: Simple Gallery Slider
body: <p>I'm trying to create a simple slider using divs and javascript. I set up a div with six images and an arrow that movies the containder holding the images 528px (the width of each image) every time it's clicked. When I reach the begining or end of the gallery, I want the respective arrow button to fade out so that the user won't keep pressing next/prev.</p>
  
  <p>Any help is appreciated.</p>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>$("#btn-gallery-next").click(function(){
  $("div#gallery li").not(this).removeClass('clicked');
  $("div#gallery-slide").animate({left:"-=528px"});
  if($("div#gallery-slide").position().left &lt; -3168)
  {
      $("#btn-gallery-next").fadeOut();
  }
  else {
      $("#btn-gallery-next").fadeIn();
  }
  
  });
  
  $("#btn-gallery-prev").click(function(){
  $("div#gallery li").not(this).removeClass('clicked');
  $("div#gallery-slide").animate({left:"+=528px"});
  if($("div#gallery-slide").position().left &gt; 0)
  {
      $("#btn-gallery-prev").fadeOut();
  }
  else {
      $("#btn-gallery-prev").fadeIn();
  }
  
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="gallery-slide"&gt;
        &lt;img class="gallery-img" src="_/img/gallery/img1.jpg" alt="" /&gt;
        &lt;img class="gallery-img" src="_/img/gallery/img2.jpg" alt="" /&gt;
        &lt;img class="gallery-img" src="_/img/gallery/img3.jpg" alt="" /&gt;
        &lt;img class="gallery-img" src="_/img/gallery/img4.jpg" alt="" /&gt;
        &lt;img class="gallery-img" src="_/img/gallery/img5.jpg" alt="" /&gt;
        &lt;img class="gallery-img" src="_/img/gallery/img6.jpg" alt="" /&gt;
  &lt;/div&gt;
  </code></pre>