How do I make this image slider to slide more than once when clicked, using Jquery/JavaScript?
<p>I have the following Jquery/JavaScript snippet I'm working on. </p>

<p>Basically it's a Object Orientated image slider. See the code on JSBin: <a href="http://jsbin.com/eloduj/3/edit#html,live" rel="nofollow">http://jsbin.com/eloduj/3/edit#html,live</a></p>

<p>The problem is that when I click the slider navigation controls it only slides once in each direction! How can I get this to work properly as there are 4 image DIVs?</p>

<p>Any help would be appreciated greatly, Thank you </p>

<p><strong>ANSWER (After some help from rdcmk) Sharing is caring</strong></p>

<p>JS</p>

<pre><code>var cn = {
    hero : function(r,rc,lx,rx){
        rc=$(rc),rcw=rc.width(),rca=rc.size(),rw=rcw*rca;$(r).css({'width':rw});
        $(lx).click(function(){n=$(r).position().left-rcw; $(r).animate({left:(n&lt;-rw+rcw?0:n)+'px'},500);});
        $(rx).click(function(){n=$(r).position().left+rcw; $(r).animate({left:(n&gt;0?-rw+rcw:n)+'px'},500);});
    }
}
$(function(){
    cn.hero('#reel', '#reel div', '#reel-left', '#reel-right');
});
</code></pre>

<p>HTML &amp; CSS</p>

<pre><code>* { padding:0; margin:0; outline:none; font-family:Arial, Helvetica, sans-serif; }
#wrap { width:1024px; margin:0 auto; }

#hero { border:1px dashed lime; position:relative; width:1022px; height:304px; overflow:hidden }
#hero #reel { border:1px dashed red; position:absolute; height:302px; left:0; }
#hero #reel div { width: 1018px; height:300px; float:left; }
#reel-controls { position: absolute; z-index:10; }

 &lt;div id="hero"&gt;
        &lt;div id="reel"&gt;
            &lt;div id="pic1" style="background-color:#C3F"&gt;&lt;/div&gt;
            &lt;div id="pic2" style="background-color:#0F9"&gt;&lt;/div&gt;
            &lt;div id="pic3" style="background-color:#999"&gt;&lt;/div&gt;
            &lt;div id="pic3" style="background-color:#6CC"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="reel-controls"&gt;
            &lt;span id="reel-left"&gt;left&lt;/span&gt;
            &lt;span id="reel-right"&gt;right&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>
