title: Coding a javascript carousel slider from scratch with jquery - using variables
body: <p>So my code works to a degree. I have a slider, with some left &amp; right buttons.</p>
  
  <p>What I'm trying to do is make sure that it can't slide past a certain point one way or the other, as there will be a fixed number of slides. So I've introduced a variable called slideWidth which I'm trying to use to keep track of the current margin. If it reaches a certain number I only want one button to work. My code below doesn't seem to change though - I can hit the left button unlimited times, and never the right...</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
  
  var slideWidth=0;
  
  if (slideWidth == 0)
   {
  
      $("#slideLeft").click(function(){
        $(".slideOverflowHide").animate({"margin-left": "-=1100px"}, "slow");
        slideWidth = slideWidth - 1100;
      });
  
   }else if (slideWidth == -3300){
  
       $("#slideRight").click(function(){
        $(".slideOverflowHide").animate({"margin-left": "+=1100px"}, "slow");
        slideWidth = slideWidth + 1100;
      });
  
   }else{
  
      $("#slideRight").click(function(){
        $(".slideOverflowHide").animate({"margin-left": "+=1100px"}, "slow");
        slideWidth = slideWidth + 1100;
      });
  
      $("#slideLeft").click(function(){
        $(".slideOverflowHide").animate({"margin-left": "-=1100px"}, "slow");
        slideWidth = slideWidth - 1100;
      });
  
   }
  
  });
  &lt;/script&gt;
  </code></pre>