CODEWITHSUNDEEP
javascripthtmljquerycssslider
evan
evan

Reputation: 11

Jquery Slider won't stop at the end

I have a jQuery slider that slides horizontally when the next button is clicked. However, when it reaches the end of the image/list sequence, it continues to slide and doesn't stop. I managed to make it not slide off the left end, but the right end is a problem.

$(document).ready(function() {
    $("#inner").css("overflow-x", "hidden"); 
    
    var xPos = $('#scroller li:last').position();
    var pos = '-' + xPos.left + 'px';
    alert(pos); 
    
    $('#next').click(function() {
        if(("#scroller ").css("margin-left") > pos ) {
            $('#scroller').animate({
                marginLeft: "-=133px"
            }, 200)
        }
    });
    
    $('#prev').click(function() {
        if($("#scroller").css("margin-left") < "0") {
            $('#scroller').animate({
                marginLeft: "+=133px"
            }, 200)
        }
    });
});

Upvotes: 1

Views: 573

Answers (1)

Alon Eitan
Alon Eitan

Reputation: 12025

first of all, you have a bug in the line:

if(("#scroller ").css("margin-left") > pos ){

change it to

if($("#scroller ").css("margin-left") > pos ){

if it doesnt help, maybe you should try this:

if(parseInt($("#scroller").css("margin-left"),0) < 0){

change it in the $('#prev').click function, and 

 if(parseInt($("#scroller ").css("margin-left"),10) > parseInt(pos,10) ){

in the $('#next').click function

Upvotes: 1

Related Questions