Coding a javascript carousel slider from scratch with jquery - using variables

Question

So my code works to a degree. I have a slider, with some left & right buttons.

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...

<script>
$(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;
    });

 }

});
</script>

Answer 1

The if check runs only once on document.ready when slideWidth is still 0, so the click event never gets attached to the slideRight button.

Also, the if check needs to be moved inside the click events, so it would run every time you click one of the buttons (left or right).

Plus, you only need to attach the click events once per button. I can see your trying to do it twice.

Answer 2

This code is inside out. You should be performing the width check inside the click functions.

$("#slideLeft").click(function(){
  if(slideWidth == 0) {