jQuery looping slider troubles

Question

I'm trying to get the following slider to loop by setting .css({"left" : "0px"}) on the ul.slider-ul. I've got a console.log("Loop") going to check that the if statement is working, which it is.

HTML

<div class="slider-small-box sone slider-box">
    <ul class="slider-ul">
        <li>
            <img src="spacer.gif" class="slider-img">
        </li>
        <li>
            <img src="spacer2.gif" class="slider-img">
        </li>
        <li>
            <img src="spacer2.gif" class="slider-img">
        </li>
        <li>
            <img src="spacer2.gif" class="slider-img">
        </li>
    </ul>
</div>

CSS

.slider-box {
    overflow: hidden;
    position: relative;
}
.slider-box ul {
    padding: 0px;
    margin: 0px;
    white-space: nowrap;
    position: absolute;
    left: 0px;
    right: auto;
}
.slider-box > ul > li {
    display: inline-block;
    border-radius: 5px;
}
.slider-small-box > ul > li > img {
    width: 270px;
    height: 200px;
    background-color: #333333;
    border-radius: 5px;
}
.slider-large-box > ul > li > img {
    width: 550px;
    height: 200px;
    background-color: #333333;
    border-radius: 5px;
}

jQuery

function slider(x) {

    function loop() { //Sets repeating random value
        var rand = Math.round(Math.random() * (5000 - 1000)) + 1000;
        slider(x)
    }

    var size = $(x).parent().width() //Getting the size of the viewport div

    var rand = Math.round(Math.random() * (5000 - 1000)) + 1000; //Sets initial random value

    setTimeout( function() { //Animating the slider to the left with a random time
        $(x).animate({"left" : "-=" + size + "px"}, 2000)
        loop();
    }, rand);

    var width = 0;
    $(x).find('li').each(function() { //Finding the total width of the images
        width += $(this).outerWidth( true );
        return(width)
    });

    var offset = size - width + "px"; //The point at which to reset the slider

    var pos = $(x).position().left + "px"; //The current left position of the slider

    var $this = $(this)
    if(pos == offset) {
        console.log("Loop"); //This gets called out
        $this.animate({"left" : "0px"}); //This doesn't set the css value
    };
}


$(function() {
    $("ul.slider-ul").each(function() {
        $this = $(this)
        slider($this)
    });
 });

See the fiddle here: Jsfiddle

EDIT:

For clarification the issue is the if statement at the bottom of the jQuery. For some reason it is not resetting the left value of the element's css to create the looping action.

Answer 1

Your are missing a lot of ';' in your javascript code :

---

EDIT

here is a working code : (DEMO JSFiddle)

function slider(x) {    

    var rand = Math.round(Math.random() * (5000 - 1000)) + 1000;
    
    // go to left
    setTimeout(function () {
        var size = x.parent().width();
        var futureLoc = x.offset().left + x.outerWidth(true) - size;
        var parentLoc = x.parent().offset().left;
        if (futureLoc <= parentLoc) {
            console.log("Loop");
            x.animate({
                "left": "0px"
            },function(){slider(x);});
        } else {
            x.animate({
                "left": "-=" + size + "px"
            }, 2000,function(){slider(x);});
        }
    }, rand);
}


$("ul.slider-ul").each(function () {
    slider($(this));
});

I had to change a lot of things and the animation is empty before it reset so you will have to play with it do have a perfect animation.

edit2 : I changed the code to make it reset properly