Slider com calculo da largura do elemento

by Salustiano Silva

HTML

<div class="slider1">
	<div class="slider2">
        <div class="slide">A</div>
        <div class="slide">B</div>
        <div class="slide">C</div>
        <div class="slide">D</div>
        <div class="slide">E</div>
	</div>
</div>
<div id="setas">
    <div class="slide-nav left">Esquerda</div>
	<div class="slide-nav right">Direita</div>
</div>

CSS

html {
    background-color: #bcbcbc;
}
.slider1 {
    overflow: hidden;
    height: 50px;
    width: 130px;
    float: left;
}
.slider2 {
    background-color: #FFF;
    width: 500px;
}

.slide {
    float: left;
    background-color: yellow;
    margin-left: 11px;
    height: 50px;
    width: 50px;
}

.slide-nav {
    cursor: pointer;
    font-family: verdana;
    font-size: 13px;
}

JavaScript

$('.slide-nav').click(function(){

    var $slider  = $('.slider2');

    if (!$slider.is(':animated')) {      

        var count    = $('.slide').size(),
            slidePx  = $slider.find(':first-child').outerWidth(true),
            slideTo  = $(this).attr('class').split(' ')[1],
            slidePos = parseInt($slider.css("margin-left")),
            offset   = (slidePx-slidePos)/slidePx;
    
        if (slideTo=="left" && (offset<count)) {
            var direcao = '-';
        }
        else if (slideTo=="right" && (offset>1)) {
            var direcao = '+';
        }
        else {
            return;
        }

        $(".slider2").animate({ "margin-left": direcao+"="+slidePx+"px" });
    }
});