Slide Galery Controls

Mueve la posición de un div tipo galería con botones de acción

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/holder/2.3.1/holder.js"></script>
<div id="mostrar">
    <div id="contenido">
        <div id="galeria_1" class="galeria">
            <ul>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
            </ul>
        </div>
        <div id="galeria_2" class="galeria">
            <ul>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
            </ul>
        </div>
        <div class="galeria">
            <ul>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
                <li><img src="holder.js/120x120"></li>
            </ul>
        </div>
        <div class="clr"></div>
    </div>
    <div class="botonera">
        <button id="izq">mover...

SCSS

/* Archivo SASS*/

#mostrar{
  width: 402px;
  height: 450px;
  overflow: hidden;
  border: solid 2px #b7b7b7;
}

#contenido{
  background-color: #ede7d4;
  padding: 0px;
  /*width: 1608px;*/
  height: 402px;

  /* IMPORTANTE para el Contenido*/
  position: relative;
}

.galeria{
  position: relative;
  float: left;
  width: 400px;
  height: 400px;

  border: solid red 1px;

  ul {
    margin: 0;
    padding: 10px;
  }
  li{
    display: inline;
    list-style: none;
  }
}

.clr {
  clear: both;
}

JavaScript

var animacionCompleta = true;

        var tamanoGaleriaWidth = 400;
        var cantGalerias = $(".galeria").length;
        var galeriaWidth = (tamanoGaleriaWidth * cantGalerias) + (cantGalerias * 2); //2 son los pixeles del borde

        var maxWidth = galeriaWidth - tamanoGaleriaWidth - 14; //galeria.padding (|0)+ galeria.border.left (2)+ mostrar.border.left (2)
        console.log("Tamaño de 1 galeria:" + tamanoGaleriaWidth);
        console.log("cantidad de galerias: " + cantGalerias);
        console.log("width de galeria: " + galeriaWidth);
        console.log("maximo width: " + maxWidth);
        console.log($("#contenido").css("left"));

        $("#contenido").css({ "width" : galeriaWidth});

        $("#izq").on("click", function(){
            console.log($("#contenido").offset());
            var leleft = $("#contenido").offset();


            console.info("posisi inicial: " + leleft.left)
            if(leleft.left > ((-1 * maxWidth) - 12)){
            var mover = leleft.left - 412;

            console.log("mover : " +mover);
            if(animacionCompleta){
                animacionCompleta = false;
                if((-1 * mover) > maxWidth){
                    mover = (-1 * maxWidth) - 12;
                }
                $("#contenido").animate({left: mover}, 600, function(){
                    animacionCompleta = true;
                    console.log($("#contenido").offset());
                    var final = $("#contenido").offset();
                    console.info("posisi final: " + final.left);
                    var diferencia = leleft.left - final.left;
                    console.info(diferencia);
                    console.log($("#contenido").css("left"));
                });
            }
            }

        });

        $("#der").on("click", function(){
            console.log($("#contenido").offset());
            var leright = $("#contenido").offset();
            if(leright.left < 10){
                var mover =...