animate gallery slides

by ashleycam3ron

HTML

<div class="group">
   <div>
       <a href="#"></a>
       <a href="#"></a>
       <a href="#"></a>
       <a href="#"></a>
       <a href="#"></a>
       <a href="#"></a>
       <a href="#"></a>
       <a href="#"></a>
       <a href="#"></a>
    </div>
</div>
<a href="#" class="arrowL">&lt;</a>
<a href="#" class="arrowR">&lt;</a>

CSS

.group {padding:5px 0px; margin-top:30px;width:200px; background-color:black; overflow:hidden; height:15px;}
.group div a{list-style-type:none;margin-right:15px;position: relative;padding:2px;border: solid 2px #222;opacity:.4; background-color:white; width:10px; height:10px; float:left;}
.arrowL {background:orange;width:18px;height:31px;cursor:pointer;float:left;margin:55;text-indent:-9999px;}
.arrowR {background:orange;right;width:15px;height:31px;cursor:pointer;color:transparent;float:right;margin-text-indent:-9999px;}

JavaScript

$('.group div a').click(function() {
            var num = $(this).html();
        });
        
        var csswidth = $('.group').css('width');
        var width = csswidth.replace('px','') * 1 + 10;
        var maxi = '-' + width * 1 + 'px';
         
        $('.arrowL').click(function() {
            if ($('.group div').css('marginLeft') != '-10px') {
                $('.group div').animate({
                    marginLeft: "+="+csswidth
                }, 500);
            }
        });
        $('.arrowR').click(function() {
            if ($('.group div').css('marginLeft') != maxi) {
                $('.group div').animate({
                    marginLeft: "-="+csswidth
                }, 500);
            }
        });