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

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

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