Creating a slider function
<p>I am creating a carousel (i know there are plugins out there but i want to create my own). i am struggling to get this bit of code to be placed inside a function as i have to return a true or false value for the code to run again. so far i have this code that is repeated: </p>

<pre><code>if(!active) {
        active = true;
        $('#box ul').animate({ 'left': left_indent }, 500, function () {
            $('#box li:last').after($('#box li:first'));
            $('#box ul').css({ 'left': left_value });
            active = false;
        });
    }
</code></pre>

<p>i have trid placing it into a function like so: </p>

<pre><code>function slider(left_indent, left_value) {
$('#box ul').animate({'left' : left_indent}, 500,function(){   

    $('#box li:first').before($('#box li:last'));          
    $('#box ul').css({'left' : left_value});

    var active = false;
});  
</code></pre>

<p>}</p>

<p>and i have tried calling it like this:</p>

<pre><code>if(!active) {
        active = true;
        slider(left_indent, left_value);
    }
</code></pre>

<p>every time i call that function i cant seem to get active to return false. I am not sure what i am missing. </p>

<p>this is all my code so far:</p>

<pre><code>$(function () {
var item_width = $("#box li img").outerWidth();
var left_value = item_width * (-1);

$('#box li:first').before($('#box li:last'));
$('#box ul').css({ 'left': left_value });

var active = false;
$("#next").click(function () {
    var left_indent = parseInt($('#box ul').css('left')) - item_width;

    if(!active) {
        active = true;
        $('#box ul').animate({ 'left': left_indent }, 500, function () {
            $('#box li:last').after($('#box li:first'));
            $('#box ul').css({ 'left': left_value });
            active = false;
        });
    }
    return false;
});

$("#back").click(function () {
    var left_indent = parseInt($('#box ul').css('left')) + item_width;

    if(!active) {
        active = true;
        slider(left_indent, left_value);
    }
    return false;
});
</code></pre>

<p>});</p>

<p>function slider(left_indent, left_value) {
    $('#box ul').animate({'left' : left_indent}, 500,function(){   </p>

<pre><code>    $('#box li:first').before($('#box li:last'));          
    $('#box ul').css({'left' : left_value});

    var active = false;
});  
</code></pre>

<p>}</p>

<p>any advice would be great. thanks in advance</p>
