Question

I want to build a content slider which has an arrow on the left and right to navigate. What I want to set the position of the slider +100px (When you click right) and -100px (when you click left). This function works.

But what goes wrong is that I want to disable it to move when it reached a certain x position value. So when a my content has reached the end it has to stop so th euser can only navigate back.

Hope you can help me because I can’t find it.

CSS

#container{
    width: 500px;
    height: 150px;
    background:#CDFAA8;
    overflow:hidden;
    position:absolute;
    left: 13px;
    }

#slider{
    width: 200px;
    height: 150px;
    background:#063;
    position:absolute;
    left: 0px;
}

#block1{
    width: 100px;
    height: 150px;
    background:#067;
    float: left;
}

#block2{
    width: 100px;
    height: 150px;
    background:#079;
    float: left;
}

#move_right{
    height: 150px;
    width: 20px;
    background: #3f3f3f;
    position: absolute;
    right:0px;
    z-index: 200;
    opacity: 0.2;
}

#move_left{
    height: 150px;
    width: 20px;
    background: #3f3f3f;
    position: absolute;
    left:0px;
    z-index: 200;
    opacity: 0.2;
}​

HTML

<div id="container">
    <div id="move_left"><button id="right">&laquo;</button></div><div id="move_right"><br><br><button id="left">&raquo;</button></div>
<div id="slider">

    <div id="block1"></div>    
    <div id="block2"></div> 

</div>
</div>

java

$("#right").click(function() {
        $("#slider").animate({
            "left": "+=100px"
             }, "slow");
});

$("#left").click(function() {
        $("#slider").animate({
            "left": "-=100px"
        }, "slow");

});

Answer 1

You have to make some check when you click on the slide button.

Here is a code which do it. I putted it in a closure and made it dynamic, just the “step” is hard-coded because your “slider” don’t have the width you want it to slide :

(function($) {
    var slider = $('#slider'),
        step = 100,
        left = parseInt(slider.css('left'), 10),
        max = $('#container').width() - slider.width(),
        min = 0;

    $("#right").click(function() {
        if (left < max) {
            var newLeft = left+step;
            left = (newLeft<max) ? newLeft : max;
            $("#slider").animate({
                "left": left + 'px'
            }, "slow");
        }
    });

    $("#left").click(function() {
        if (left > 0) {
            var newLeft = left - step;
            left = (newLeft>min) ? newLeft : min;
            slider.animate({
                "left": left + 'px'
            }, "slow");
        }
    });
})(jQuery);