making a simple jQuery slider [duplicate]

Question

I'm trying to teach myself javascript/jquery so I set myself a project to create a very basic slider for my website. Using Codeacademy's and the jQuery API library I've got myself familiar with the code but am having difficulty getting to grips with the syntax. I am, therefore, coming here to seek help by means of somebody spell-checking my efforts.

Here's 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 moving the 1500px-wide div containing the images left by 500px when a button is clicked. The slider is within a container div which has a 500px width and hidden overflow. The if statement is to make sure the div does not continue traveling left after it has reached the end of the container div

I'm entirely grateful to anyone who can help with this rather selfish request

Answer 1

Here is your js code with the syntax errors as noted above fixed as well as a couple of other errors which were preventing 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 have removed the .between() function from your code since I couldn't find any documentation on this anywhere. If you have the reference to this function I would love to see it. For now, I have replaced it with a simple value comparison.

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