Creating a simple jQuery slider

Question

I am trying to teach myself javascript / jquery, so I set myself a project creating a very simple slider for my site. Using Codeacademy and the jQuery API library, I got to know the code myself, but it's hard for me to handle the syntax. Therefore, I come here to seek help through someone, checking my efforts.

Here is the code:

CSS

#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;} 

HTML:

 <div id="wrapper"> <div id="slider"> <div class="content"><p>blah</p></div> <div class="content"><p>blah</p></div> <div class="content"><p>blah</p></div> </div> </div> <button id="left">left</button> <button id="right">right</button> 

and finally:

 $#left.click(function { if ($('#slider').css('margin-left').between(0,-1500)) { $('#slider').animate({ margin-left : "+=500" }, 500); }); } } 

which translates to a 1500px wide div that contains the image remaining at 500 pixels when the button is pressed. The slider is in a div container that has a width of 500 pixels and hidden overflow. The if statement must ensure that the div does not continue to move left after it reaches the end of the div container

I am completely grateful to everyone who can help with this rather selfish request.

Answer 1

Here is your js code with syntax errors as above, as well as a few other errors that prevented your code from running correctly.

 $('#left').click(function(){ if ($('#slider').css('margin-left') <= '0px' && $('#slider').css('margin-left') >= '-1500px') { $('#slider').animate({ "margin-left" : "+=500" }, 500); }; }); 

Note. I removed the .between () function from your code, since I could not find any documentation anywhere. If you have a link to this function, I would really like to see it. At the moment, I have replaced it with a simple comparison of values.

Here is jsfiddle with your code: http://jsfiddle.net/ghCX6/2/