[Beriagts]

Иметься:

<style>
.wrapper{width: 480px;
height: 230px;
border: 1px solid black;
margin: 40px;
overflow: hidden;
}
.bax {float: left;width: 3500px;}
.fr {width: 480px;float: left;height: 180px;}
.nav {float: left;width: 480px;height:50px;}
.nav a{float: left;width:68px; height: 40px;}
</style>
<script>

</script>
 <div class="wrapper">
        <div class="bax">
            <div class="fr 1" >1</div>
            <div class="fr 2" style="background: black;">2</div>
            <div class="fr 3" style="background: red;">3</div>
            <div class="fr 4" style="background: blue;">4</div>
            <div class="fr 5" style="background: silver;">5</div>
            <div class="fr 7" style="background: yellow;">6</div> 
            <div class="fr 7" style="background: aqua;">7</div>      
        </div>
        <div class="nav">
            <a href="#" rel="1">1</a>
            <a href="#" rel="2">2</a>
            <a href="#" rel="3">3</a>
            <a href="#" rel="4">4</a>
            <a href="#" rel="5">5</a>
            <a href="#" rel="6">6</a>
            <a href="#" rel="7">7</a>
        </div>
 </div>

Интересуют примеры/указания как можно сделать прокрутку div-ов в лево/право нужно чтото например animate (marginLeft/MarginRight), в данный момент пытаюсь определить положения "а" относительно остальных элементов и делать соответственную анимацию, но много кода, есть альтернативные подходы?