advice on how to fix the prev and next buttons of content slider
<p>I'm trying to add in previous and next buttons to my content slider but seem to be having problems, what I would really like to do is move the $slideCtn left or right by the width slideWidth each time the previous or next button is clicked but i'm unsure how to increment each click by the value of slideWidth. I've tried ++ and -- etc but with no results, would anyone be able to show me the best way to do something like this? Also any other advice very welcome!</p>

<p>Or should I create a global index variable that gets set at 0, then as the pagination x's are clicked or the prev/next arrows are clicked update this global variable?</p>

<p><strong>JS Snippet</strong></p>

<pre><code>//Add previous + next arrows
$dirArrows.on('click', function(e){

    var arrDir = $(this).data('dir');

    $slideCtn.css('left', ( arrDir === 'prev' ) ? -(slideWidth) : +(slideWidth));

    e.preventDefault();
});
</code></pre>

<p><strong>JS Fiddle</strong>
<a href="http://jsfiddle.net/SG5ad/10/" rel="nofollow">http://jsfiddle.net/SG5ad/10/</a></p>
