Slider works fine in Firefox but not in Chrome and Safari
<p>My slider works fine in firefox but it does not work in Chrome or Safari. I am new to jQuery. I only ben using it for a month. I can tell that my script is creating my elements but after that I cannot tell what is tripping it up.</p>

<p>Here is my slider code. </p>

<pre class="lang-js prettyprint-override"><code>(function($){
    var sliderUL = $("div.slider").css("overflow", "hidden").children("ul"),
        imgs = sliderUL.find('img'),
        imgsWidth = imgs.width(),
        imgsLen = imgs.length,
        current = 1,
        totalImgsWidth = imgsWidth * imgsLen;

        $("&lt;div id='slider-nav'&gt;&lt;/div&gt;").insertAfter('div.slider');

        $("#slider-nav").prepend("&lt;button data-dir='next'&gt;Next&lt;/button&gt;");
        $("#slider-nav").prepend("&lt;button data-dir='prev'&gt;Prev&lt;/button&gt;");

    $("#slider-nav").show().find("button").on("click", function(){
        var direction = $(this).data("dir");
        var loc = imgsWidth;

        if(direction === "next"){
            current = ++current;
        }else if (direction === "prev"){
            current = --current;
        }

        if(current === 0){
            current = imgsLen;
            loc = totalImgsWidth - imgsWidth;
            direction = "next";
        }else if(current -1 === imgsLen){
            current = 1;
            loc = 0;
        }
        transition(sliderUL, loc, direction);
    });

    function transition( container, loc, direction){
        var unit;
        if(direction &amp;&amp; loc !== 0){
            unit = (direction === "next") ? "-=" : "+="
        }
        container.animate({
            "margin-left" : unit ? (unit + loc) : loc
        })
    };
})(jQuery);
</code></pre>
