Помогите пожалуйста минимизировать код
 

Доброе Утро ! Сегодня решил написать мини слайдер , в общем получился огромнейший код ,
причем такой армейский, как говориться перекладываем с места на место.
Имеется див с слайдами и див с переключателями, по умолчанию 3 дива с слайдами стоят как дисплей нон , по событию клик один слайд уходит влево а второй появляется и при этом к кружку на который был произведен клик добавляется класс селектед а с пред идущего убирается . В общем намутил я дерибасов в скрипте , такой советский код получился . Я так полагаю мои эти мутки можно сократить . По возможности, помогите решить мою задачу.
С уважением Антон.

<div class="medium-slider-wrap">
    <div class="medium-slide-1">
        <a href="#"><img src="images/logo-1.png" alt="logo"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo"></a>
    </div>
    <div class="medium-slide-2">
        <a href="#"><img src="images/logo-1.png" alt="logo"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo"></a>
    </div> 
    <div class="medium-slide-3">
        <a href="#"><img src="images/logo-1.png" alt="logo"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo"></a>
    </div> 
    <div class="medium-slide-4">
        <a href="#"><img src="images/logo-1.png" alt="logo"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo"></a>
    </div>     
</div>
<div class="switch">
    <ul>
        <li class="sl-1"><a class="selected"></a></li>
        <li class="sl-2"><a></a></li>
        <li class="sl-3"><a></a></li>
        <li class="sl-4"><a></a></li>
    </ul>
</div>

// JavaScript Document
$(document).ready(function() {
	$('.sl-1').click(function(){
		$(".sl-1 > a").addClass('selected'),
		$(".sl-2 > a").removeClass('selected'),
		$(".sl-3 > a").removeClass('selected'),
		$(".sl-4 > a").removeClass('selected'),
		$(".medium-slide-2" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-3" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-4" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-1" ).show( "slide",{ direction: "right" }, 500 );
	});
	$('.sl-2').click(function(){
		$(".sl-2 > a").addClass('selected'),
		$(".sl-1 > a").removeClass('selected'),
		$(".sl-3 > a").removeClass('selected'),
		$(".sl-4 > a").removeClass('selected'),
		$(".medium-slide-2" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-3" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-1" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-2" ).show( "slide",{ direction: "right" }, 500 );
	});
		$('.sl-3').click(function(){
		$(".sl-3 > a").addClass('selected'),
		$(".sl-1 > a").removeClass('selected'),
		$(".sl-2 > a").removeClass('selected'),
		$(".sl-4 > a").removeClass('selected'),
		$(".medium-slide-2" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-4" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-1" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-3" ).show( "slide",{ direction: "right" }, 500 );
	});
		$('.sl-4').click(function(){
		$(".sl-4 > a").addClass('selected'),
		$(".sl-2 > a").removeClass('selected'),
		$(".sl-3 > a").removeClass('selected'),
		$(".sl-1 > a").removeClass('selected'),
		$(".medium-slide-2" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-3" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-1" ).hide( "slide",{ direction: "left" }, 500 ),
		$(".medium-slide-4" ).show( "slide",{ direction: "right" }, 500 );
	});
});

<style type="text/css">
div[class^="medium-slide-"]{
 display:none; 
}
div.medium-slide-1{
 display:block; 
}
.switch li{
 cursor:pointer;
}
</style>


<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('li[class^="sl-"]').click(function(){

		var liClass = $(this).attr('class').replace(/^([^\s]+).*$/ig,"$1");
		var num = liClass.replace("sl-","");
		$(this).parent().find("li a").removeClass('selected');
		$(this).find("a").addClass('selected');

		$('div[class^="medium-slide-"]').not('div.medium-slide-'+num).hide();
		$('div.medium-slide-'+num).show();

	});
});

</script>



<div class="medium-slider-wrap">
    <div class="medium-slide-1">
        <a href="#"><img src="images/logo-1.png" alt="logo"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo"></a>
    </div>
    <div class="medium-slide-2">
        <a href="#"><img src="images/logo-1.png" alt="logo1"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo1"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo1"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo1"></a>
    </div> 
    <div class="medium-slide-3">
        <a href="#"><img src="images/logo-1.png" alt="logo2"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo2"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo2"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo2"></a>
    </div> 
    <div class="medium-slide-4">
        <a href="#"><img src="images/logo-1.png" alt="logo3"></a>
        <a href="#"><img src="images/logo-2.png" alt="logo3"></a>
        <a href="#"><img src="images/logo-3.png" alt="logo3"></a>
        <a href="#"><img src="images/logo-4.png" alt="logo3"></a>
    </div>     
</div>
<div class="switch">
    <ul>
        <li class="sl-1"><a class="selected">1</a></li>
        <li class="sl-2"><a>2</a></li>
        <li class="sl-3"><a>3</a></li>
        <li class="sl-4"><a>4</a></li>
    </ul>
</div>

C .hide( "slide",{ direction: "left" }, 500 ); и .show( "slide",{ direction: "right" }, 500 ); - разбирайтесь сами
ибо обычно делаю через animate()

это http://api.jqueryui.com/hide/
на всякий случай

вот этого непонял

$('li[class^="sl-"]').click(function(){ 
var liClass = $(this).attr('class').replace(/^([^\s]+).*$/ig,"$1"); 
var num = liClass.replace("sl-","");

не проще

$('.switch a').click(function(){
var num = +$(this).text();
//или  var num = ++$('.switch a').index(this);

а все почему? Да потому, что с алгоритмами люди научились работать, а вот с данными нет :)

Ну не сразу же все профессорами становяться..

Показал специально: как вычленить класс

Большое спасибо !