calculations and probably approach getting the better with slider, advice really required
<p>I've created a slider consisting of a list of panels, basically when the code loads I want to work out some calculations and present .active dead center of #wrapper, then when you click a panel i want to basically position that .active panel dead center of the page. At the moment my calculations are way off and I'm not completely sure how to achieve this effect. Im basically working out the #wrapper width, the clicked items left offset, the arrows widths and trying to work with these to position .slides left property. If anyone could help it would be greatly appreciated.</p>

<p>JS</p>

<pre><code>slides_li.not('.dummy').on('click', function() {

                var off = $(this).offset(),
                    off_left = off.left,
                    calc = -(wrapper_w - off_left - arrow_w);

                console.log(off_left, arrow_w, calc);

                $(this).parent().css('left', calc);
                gep.toggle_slides(this);

            });
</code></pre>

<p><strong>Fiddle is here</strong> : <a href="http://jsfiddle.net/E5GSM/21/" rel="nofollow">http://jsfiddle.net/E5GSM/21/</a></p>
